React hooks fetch не остановит выборку - PullRequest
Новая
       38

React hooks fetch не остановит выборку

0 голосов
/ 08 июля 2019

Я пытаюсь перестроить некоторые компоненты класса, которые у меня есть, в качестве функциональных компонентов, используя перехватчики React для выполнения выборки.

Я могу получить данные, это нормально, но он вызывает мой API каждые несколько миллисекунд, я просто хочу, чтобы он извлекал данные и останавливался, как это было бы в компоненте класса с componentDidMount.

Думаю, я понимаю, почему он это делает (fetchData () внутри функции означает, что он будет продолжать вызывать сам себя), но я не уверен, как это исправить.

Я попытался добавить setInterval, изменить порядок и переместить fetchData () за пределы функции (компонент не рендерится, потому что тогда он был неопределенным). 

const MyFunction = () => {

const [apiResponse,setApiResponse] = useState({})

  async function fetchData() {

    const res = await fetch(`http://localhost:9000/example`,{
      method: 'POST',
      mode: 'cors',
      body: JSON.stringify({date: '20190707'}),
      headers: {'content-type': 'application/json',
      credentials: 'include'
    }
    })
  res
  .json()
  .then(res => setApiResponse(res))
  }

useEffect(() => {

  fetchData();

});


var queryResult = apiResponse['units']


return (
  <React.Fragment>  
    <CardHeader color={"info"} stats icon>
    <CardIcon color={"info"}>
    <Icon>{"trending_up"}</Icon>
    </CardIcon>
    <p className={''}>Drop In</p>
      <h3 className={''}>
        {queryResult} <small>Units</small>
      </h3>
    </CardHeader>
    <CardFooter ></CardFooter>
  </React.Fragment>        
);

}

Ответы [ 2 ]

1 голос
/ 08 июля 2019

Попробуйте добавить пустой массив в конце вашего useEffect: 

useEffect(() => {

  fetchData();

}, []);

React Docs: https://reactjs.org/docs/hooks-effect.html

Примечание

Если вы используете этооптимизация, убедитесь, что массив включает все значения из области действия компонента (например, реквизиты и состояние), которые изменяются со временем и используются эффектом. В противном случае ваш код будет ссылаться на устаревшие значения из предыдущих визуализаций.Узнайте больше о том, как обращаться с функциями и что делать, если массив изменяется слишком часто.

Если вы хотите запустить эффект и очистить его только один раз (при монтировании и размонтировании), вы можете передать пустоймассив ([]) в качестве второго аргумента.Это говорит React, что ваш эффект не зависит от каких-либо значений из реквизита или состояния, поэтому его не нужно повторно запускать.Это не обрабатывается как особый случай - это следует непосредственно из того, как всегда работает массив зависимостей.

Если вы передадите пустой массив ([]), реквизиты и состояние внутри эффекта всегда будут иметь своиначальные значения.Если передать [], поскольку второй аргумент ближе к знакомой ментальной модели componentDidMount и componentWillUnmount, обычно есть лучшие решения, позволяющие избежать слишком частого повторного запуска эффектов.Кроме того, не забывайте, что React откладывает выполнение useEffect до завершения рисования браузера, поэтому выполнение дополнительной работы - не проблема.

Мы рекомендуем использовать правило exhaustive-deps как часть нашего eslint-plugin-react-hooks пакет.Он предупреждает, что зависимости указаны неверно, и предлагает исправление.

0 голосов
/ 08 июля 2019

То, что вы делаете, прекрасно - вам просто нужно добавить пустой массив зависимостей в вашу реализацию useEffect (пояснение ниже), например так - 

useEffect(() => {
  fetchData();
}, []);

Когда вы передаете массив для использованияEffectвы фактически указываете React запускать свой эффект только при изменении одного из значений в массиве.

Мы используем пустой массив в качестве массива зависимостей, потому что он вызывает эффект, имитирующий ComponentDidMountСобытие жизненного цикла, которое мы все знаем и любим в компонентах класса, оно запускается только при монтировании компонента, а не после каждого рендеринга.

Вы можете использовать useEffect для имитации других событий жизненного цикла, таких как ComponentWillUnmount, ComponentDidUpdate и т. д.Я бы посоветовал прочитать больше о хуке useEffect в документах .

...