Question

我在使用钩子反应，我在控制台中看到此警告，我在Google上搜索，但找不到最佳解决方案，谁能告诉我此警告的起因以及如何解决此问题。

第9：6行：React Hook useEffect缺少依赖项：'props'。包括它或删除依赖项数组。但是，当 any 道具发生更改时，“道具”将发生变化，因此首选解决方法是在useEffect调用之外对“道具”对象进行解构，并引用useEffect内的那些特定道具react-hooks / exhaustive-部门 printWarnings @ webpackHotDevClient.js：120 handleWarnings @ 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 @ itter.js：53 WebSocketTransport.ws.onmessage @ websocket.js：36

我的代码是

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

Answer 1

在从useEffect声明第二个参数时，您应该传递所有依赖项。

问题是firtstTimeCourseList是通过callback提供的props，这意味着它没有稳定的签名，因此会更改每个渲染并始终触发效果。您可以使用useCallback

在附加的依赖检查层中包装回调

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

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

有关更多详细信息，请查看Dan Abramov的this article

Answer 2

如果useEffect具有任何依赖项，则需要在方括号中添加那些依赖项。

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

Answer 3

您应该在创建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>

如果我在throw props中调用函数，useEffect会显示警告？

3 个答案: