Question

反应文档状态：请勿在循环，条件或嵌套函数内调用Hooks。

调用钩子意味着仅调用useState，例如const [state, useState] = useState(0)？

在条件调用中调用二传手怎么办？

这是代码违反钩子的规则吗？

const [oneHook, setOneHook] = useState(0)
const [anotherHook, setAnotherHook] = useState(false)

if (something) {
   setOneHook(1)
   setAnotherHook(true)
} else {
     setOneHook(0);
     setAnotherHook(false)
}

谢谢！

Answer 1

否，该代码示例不会违反钩子规则。每次组件呈现时，都会以完全相同的顺序对useState进行完全相同的调用，因此可以。

我确实要指出，立即在组件主体中设置状态没有多大意义。装入组件后，它将开始使用状态的初始值进行渲染，但是在完成渲染之前，状态已经更改并且必须重新开始。但这大概只是示例的结果，在您的实际代码中，if将位于useEffect或其他一些实际的代码位置。

Answer 2

反应文档指出：不要在循环，条件或嵌套函数内调用Hooks。

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

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

如果要在循环内设置状态，而不是每次重新渲染您不想进入的组件。

此代码是否违反了钩子规则

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

如果语句暗示BREAKHOOKS HOOKS，调用useState的setter是否会挂在里面？

2 个答案: