React Hook useEffect 缺少對 React 中 useState 設置器的依賴

Question

我知道， useEffect需要他在依賴數組中的依賴項，但是當我將它與useState結合使用時，我將有一個無限循環：

const [valid, setValid] = useState(false);

useEffect(() => {
   setValid(true);
}, [valid]};

這就是我使用它的原因：

useEffect(() => {
   setValid(true);
}, []};

因此，我得到：

React Hook useEffect has a missing dependency: 'setValid'.

我怎樣才能擺脫警告？

Answer 1

您可以安全地將此依賴項添加到您的useEffect中。 React 保證在每次渲染時都具有相同的 function 身份。

來自 React 文檔：

React 保證 setState function 身份是穩定的，並且在重新渲染時不會改變。 這就是為什么從useEffect或useCallback依賴列表中省略是安全的。

因此，即使您添加到依賴項中，它也不會觸發任何意外調用。

如果要禁用警告，您可以使用 Dan Abramov 的react-hooks eslint 插件並禁用規則。 但我不會推薦它。 這個插件可以讓你避免很多錯誤

現在，對於問題的第二部分，您將 state 設置在相同的useEffect中，當 state 值更改時將觸發回調。

您的useEffect一直在無限循環中調用自己。

因此，正確的解決方案是：

useEffect(() => {
    setValid(value)
}, [setValid])

Answer 2

請嘗試將 setValid 添加到依賴數組而不是有效：

const [valid, setValid] = useState(false);

useEffect(() => {
   setValid(true);
}, [setValid]};