迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

React 中 TypeError: ‘XXX’ is not a function 错误修复

作者:迹忆客 最近更新:2022/06/02 浏览次数:

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

React TypeError setCount is not a function

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

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());
}

本站文章均为原创或翻译,转载请发邮件至 1244347461@qq.com 进行申请,未经许可,禁止转载。经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便