迹忆客 专注技术分享

当我们尝试将不是函数的值作为函数调用时，会发生 React.js “Uncaught TypeError: X is not a function”，例如 调用 props 对象而不是函数。 为了解决这个错误，使用 console.log 打印正在调用的值来确认它是否是一个函数。

下面是错误发生方式的示例。

import {useState} from 'react';

// 👇️ should take props object and not setCount directly
// ⛔️ Uncaught TypeError: setCount is not a function
function Child(setCount) {
  return (
    <div>
      <button onClick={() => setCount(current => current + 1)}>
        Click
      </button>
    </div>
  );
}

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Child setCount={setCount} />

      <h2>Count: {count}</h2>
    </div>
  );
}

Child 组件应该获取 props 对象，但我们将其命名为 setCount 并尝试在组件中调用 props 对象。

解决错误的最佳方法是在 Child 组件中记录 setCount 值并确保它是一个函数。

Child 组件应该接受一个 props 对象，并且应该访问 props 上的 setCount 函数。

import {useState} from 'react';

// 👇️ 现在组件接受 props 对象并调用 props.setCount 函数
function Child(props) {
  console.log('props obj:', props);
  return (
    <div>
      <button onClick={() => props.setCount(current => current + 1)}>
        Click
      </button>
    </div>
  );
}

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Child setCount={setCount} />

      <h2>Count: {count}</h2>
    </div>
  );
}

或者，我们可以解构函数定义中的属性。

// 👇️ 解构 setCount 属性并直接使用它
function Child({setCount}) {
  return (
    <div>
      <button onClick={() => setCount(current => current + 1)}>Click</button>
    </div>
  );
}

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Child setCount={setCount} />

      <h2>Count: {count}</h2>
    </div>
  );
}

React 中出现“Uncaught TypeError: XXX is not a function”错误的另一个常见原因是当我们尝试对不正确类型的值调用函数时。

例如，如果我们尝试在一个不是数组的值上调用 pop() 方法，会产生一个错误。

const obj = {};

// ⛔️ Uncaught TypeError: obj.pop is not a function
obj.pop();

pop() 方法只能在数组上调用，因此尝试在任何其他类型上调用它会引发“X is not a function”错误，因为该类型上不存在 pop 函数。

最好的调试方法是使用 console.log 打印你调用函数的值并确保它是正确的类型。

const obj = {};

console.log(typeof obj); // 👉️ "object"
console.log(Array.isArray(obj)); // 👉️ false

一旦确定调用方法的值是预期类型并且该方法受所述类型支持，错误将得到解决。

我们还可以在调用方法之前使用条件来检查值是否属于正确的类型。

const obj = {};

if (Array.isArray(obj)) {
  console.log(obj.pop());
}