useEffect показать предупреждение, если я вызову функцию в броске реквизита? - PullRequest
Новая
       7

useEffect показать предупреждение, если я вызову функцию в броске реквизита?

1 голос
/ 07 ноября 2019

Я использую перехват в реакции и вижу это предупреждение в своей консоли, я ищу в Google, но не нашел лучшего решения, может кто-нибудь сказать мне, почему это предупреждение появляется и как его решить.

Строка 9: 6: React Hook useEffect отсутствует зависимость: «props». Либо включите его, либо удалите массив зависимостей. Тем не менее, «реквизиты» изменятся при изменении любого реквизита, поэтому предпочтительным исправлением является деструктурирование объекта «реквизиты» вне вызова useEffect и обращение к этим конкретным реквизитам внутри useEffect response-hooks / исчерпывающе-deps. printWarnings @ webpackHotDevClient.js: 120 handleWarnings @ webpackHotDevClient.js: 125 push ../ node_modules / реагировать-dev-utils / webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js: 190 push ../ node_mo среди клиентов/event/eventtarget.js.EventTarget.dispatchEvent @ eventtarget.js: 56 (анонимный) @ main.js: 283 push ../ node_modules / sockjs-client / lib / main.js.SockJS._transportMessage @ main.js: 281push ../ 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 ");
  }, []);

Ответы [ 3 ]

4 голосов
/ 07 ноября 2019

Вы должны передать все зависимости при объявлении второго аргумента выключенным useEffect.

Проблема в том, что firtstTimeCourseList - это callback, предоставляемый через props, что означает, что он не имеет стабильной подписи, поэтому изменяет каждый рендер, всегда вызывая эффект. Вы можете обернуть свой обратный вызов дополнительным уровнем проверки зависимостей с помощью useCallback

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

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

Для получения более подробной информации проверьте эту статью от Дана Абрамова

3 голосов
/ 07 ноября 2019

Вы должны использовать useCallback в компоненте, где вы создаете handlerFromParent. Рассмотрим следующий пример: 

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>
3 голосов
/ 07 ноября 2019

Если useEffect имеет какие-либо зависимости, их необходимо добавить в квадратные скобки. 

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