useState 不是函数

在 React 中，useState 是一个常用的 Hook，它可以用于在函数组件中添加状态。但是，有时候我们可能会遇到 useState 不是函数的错误，这通常意味着我们在使用它时犯了一些错误。

错误示例

以下是一个错误示例：

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState;
  
  const handleClick = () => {
    setCount(count + 1);
  }
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;

在这个例子中，我们忘记了给 useState 传递初始状态值，因此它返回了一个函数，而不是一个数组。这就是为什么在函数组件中尝试调用它时会出现 "useState 不是函数" 的错误。

正确用法

为了避免这种错误，我们需要始终给 useState 传递初始状态值。以下是一个示例：

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1);
  }
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;

在这个例子中，我们给 useState 传递了 0 作为初始状态值，因此它返回了一个包含 count 和 setCount 的数组。现在我们可以在 handleClick 函数中对 count 进行操作了。

结论

在使用 useState 时，务必记得始终给它传递初始状态值。如果您遇到 "useState 不是函数" 的错误，那么很可能是由于忘记传递初始状态值所导致的。