如果我在投擲道具中調用 function，useEffect 會顯示警告嗎？

Question

我在反應中使用鈎子，我在控制台中看到這個警告，我搜索谷歌但沒有找到最佳解決方案，誰能告訴我為什么會出現這個警告以及如何解決這個問題。

第 9:6 行：React Hook useEffect 缺少依賴項：'props'。 包括它或刪除依賴數組。 但是，當任何道具發生變化時，“道具”會發生變化，因此首選修復方法是在 useEffect 調用之外解構“道具”object，並在 useEffect react-hooks/exhaustive-deps printWarnings @ webpackHotDevClient.js 中引用這些特定道具： 120句柄警告@webpackHotDevClient.js:125 push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage@webpackHotDevClient.js:190 push../node_modules/sockjs-client/lib/event/eventtarget.js .EventTarget.dispatchEvent@eventtarget.js:56（匿名）@main.js:283 push../node_modules/sockjs-client/lib/main.js.SockJS._transportMessage@main.js:281 push../node_modules/ sockjs-client/lib/event/emitter.js.EventEmitter.emit@emitter.js:53 WebSocketTransport.ws.onmessage@websocket.js:36

我的代碼是這個

useEffect(() => {
    props.firtstTimeCourseList();
    console.log("____UserEffect call function here ");
  }, []);

Answer 1

在將第二個參數聲明為 off useEffect時，您應該傳遞所有依賴項。

問題是firtstTimeCourseList是通過props提供的callback ，這意味着它沒有穩定的簽名，因此每次渲染都會改變，總是觸發效果。 您可以使用useCallback使用額外的依賴檢查層來包裝您的回調

const Component = ({ handlerFromParent }) =>{
    //Assuming that the handler doesn't have to change
    const stableHandler = useCallback(handlerFromParent, [])

    useEffect(() =>{
        stableHandler()
   },[stableHandler])
}

有關更多詳細信息，請查看 Dan Abramov 的這篇文章

Answer 2

您應該在創建 handlerFromParent 的組件中使用 useCallback。 考慮以下示例：

 const { useState, useCallback } = React; function App() { const [count, setCount] = useState(1); const add = () => setCount(count => count + 1); const aCallback = () => count; return ( <div> {count} <button onClick={add}>+</button> <Child aCallback={aCallback} /> </div> ); } function Child({ aCallback }) { const cb = useCallback(aCallback, []); return <div>{cb()}</div>; } ReactDOM.render(<App />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>

這是在父級中使用 useEffect 的示例：

 const { useState, useCallback } = React; function App() { const [count, setCount] = useState(1); const add = () => setCount(count => count + 1); const aCallback = useCallback(() => count, [count]); return ( <div> {count} <button onClick={add}>+</button> <Child aCallback={aCallback} /> </div> ); } function Child({ aCallback }) { return <div>{aCallback()}</div>; } ReactDOM.render(<App />, document.getElementById('root'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 3

如果 useEffect 有任何依賴項，則需要將它們添加到方括號中。

const { firtstTimeCourseList } = props;
useEffect(() => {
    firtstTimeCourseList();
    console.log("____UserEffect call function here ");
  }, [firtstTimeCourseList]);