在 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)       }    });如果您在循环内设置状态，则每次组件重新呈现您不想进入的状态时。这段代码是否违反了钩子的规则否 您的代码看起来不错，因为您仅在组件呈现时仅根据条件设置一次状态