react 中 typeerror: ‘xxx’ is not a function 错误修复-ag捕鱼王app官网

当我们尝试将不是函数的值作为函数调用时，会发生 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)}>clickbutton>
    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());
}