如何使用useEffect管理依赖数组

Question

假设我有两个变量varA和varB。我只想在varB发生变化的情况下对varA做点什么。我可以写点什么，大意是……

useEffect(()=> {
DO SOMETHING TO varA;
}, [varB])

如果我这样做，REACT将在控制台中抛出关于缺少依赖项varA的警告，并要求将其添加到数组中。但这样做会产生我不想要的行为。在这种情况下，我该如何处理警告?

Answer 1

React钩子的一个规则是useEffect必须包含它在依赖数组中引用的所有变量。这就是你得到错误的原因。您可以有额外的变量，如varB，但您不能排除一个，否则您可能会遇到一些不稳定的行为。

一种方法是使用ref，它允许你以一种永远不会触发渲染的方式存储值。ref需要包含在依赖数组中，但是因为它永远不会改变，所以它不会再次触发useEffect。

const varARef = useRef(varA)
useEffect(()=> {
DO SOMETHING TO varARef.current;
}, [varARef, varB])

注意，如果你想让varARef.current和varA保持同步，你需要添加一行:

const varARef = useRef(varA)
varARef.current = varA
useEffect(()=> {
DO SOMETHING TO varARef.current;
}, [varARef, varB])

Answer 2

如果必须使用当前状态更新变量的状态，最好的方法是使用回调在设置状态。

如果你像这样改变你的代码，不会触发任何问题。

[varB, setVarB] = useState("");
[counter, setCounter] = useState(0);
useEffect(()=>{
setCounter(currentCounter => currentCounter+1);
},[varB]) // No warning here

完整答案:useEffect在基于当前值更新状态时缺少依赖项