React报错之React hook 'useState' is called conditionally

正文从这开始~

总览

useState

这里有个例子用来展示错误是如何发生的。

import React, {useState} from 'react';
export default function App() {

  const [count, setCount] = useState(0);
if (count > 0) {

    return <h1>Count is greater than 0</h1>;

  }
// ️ React Hook "useState" is called conditionally.

  //React Hooks must be called in the exact same order

  // in every component render. Did you accidentally call

  // a React Hook after an early return?

  const [message, setMessage] = useState('');
return (

    <div>

      <h2>Count: {count}</h2>

      <button onClick={() => setCount(count + 1)}>Increment</button>

    </div>

  );

}

useState

顶层调用

为了解决该问题，我们必须在最顶层调用React钩子。

import React, {useState} from 'react';
export default function App() {

  const [count, setCount] = useState(0);
// ️ move hooks above condition that might return

  const [message, setMessage] = useState('');
// ️ any conditions that might return must be below all hooks

  if (count > 0) {

    return <h1>Count is greater than 0</h1>;

  }
return (

    <div>

      <h2>Count: {count}</h2>

      <button onClick={() => setCount(count + 1)}>Increment</button>

    </div>

  );

}

useState

这样就解决了这个错误，因为我们必须确保每次组件渲染时，React钩子都以相同的顺序被调用。

这意味着我们不允许在循环、条件或嵌套函数内使用钩子。

我们绝不应该有条件地调用钩子。

import React, {useState} from 'react';
export default function App() {

  const [count, setCount] = useState(0);
if (count === 0) {

    // ️ React Hook "useState" is called conditionally.

    // React Hooks must be called in the exact same order in every component render.

    const [message, setMessage] = useState('');

  }
return (

    <div>

      <h2>Count: {count}</h2>

      <button onClick={() => setCount(count + 1)}>Increment</button>

    </div>

  );

}

useState

这是不允许的，因为钩子的数量和钩子调用的顺序，在我们的函数组件的重新渲染中必须是相同的。

useState

就像文档中所说的：

• 只在最顶层使用 Hook
• 不要在循环，条件或嵌套函数中调用 Hook
• 确保总是在你的 React 函数的最顶层以及任何 return 之前使用 Hook
• 在 React 的函数组件中调用 Hook
• 在自定义 Hook 中调用其他 Hook