在 if 语句中调用 useState hook 的 setter 是否意味

Question

React 文档声明： 不要在循环、条件或嵌套函数内调用 Hook。调用钩子是否意味着只是调用useStateeg const [state, useState] = useState(0)？在条件中调用 setter 怎么样？这段代码是否违反了钩子规则？const [oneHook, setOneHook] = useState(0)const [anotherHook, setAnotherHook] = useState(false)if (something) {   setOneHook(1)   setAnotherHook(true)} else {     setOneHook(0);     setAnotherHook(false)}谢谢 ！

Answer 1

不，那个代码示例没有违反钩子的规则。每次组件渲染时，都会以完全相同的顺序对 useState 进行相同数量的调用，这样就可以了。

我确实想指出立即在组件主体中设置状态没有多大意义。当组件挂载时，它将使用 state 的初始值开始渲染，但在它完成渲染之前，状态已经改变，它必须重新开始。但据推测，这只是示例的一个工件，在您的实际代码中，if它将位于 useEffect 或其他一些实际代码位置内。

Answer 2

React 文档声明：不要在循环、条件或嵌套函数内调用 Hook。

好的，以下代码显示了上述语句的示例。我遇到了同样的问题，我需要在循环内设置状态，如下所示

const [someArray, setArray] = useState([]);

someValue.forEach((value, index) => {

     setArray([...someArray, value]) //this should be avoided

    });

以上事情我已经实现如下

var temp = [];

var counter = 0;

someValue.forEach((value, index) => {

    temp.push(value);

    counter++;

     if (counter === someValue.length) {

          setArray(temp)

       }

    });

如果您在循环内设置状态，则每次组件重新呈现您不想进入的状态时。

这段代码是否违反了钩子的规则

否 您的代码看起来不错，因为您仅在组件呈现时仅根据条件设置一次状态