如果我在投掷道具中调用 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]);