Лучшие практики React перехватывает загрузку HTTP - PullRequest
Новая
       0

Лучшие практики React перехватывает загрузку HTTP

1 голос
/ 20 сентября 2019

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

function MyComponent() {
  const [data, setData] = useState([]);
  const [dataLoaded, setDataLoaded] = useState(false);

  var getDataFromHTTP = async () { ... }

  var loadData = async () => {
    if (!dataLoaded) {
      setDataLoaded(true);
      setData(await getDataFromHTTP());
    }
  }

  loadData();

  return( ... );
}

Если мне нравится, как все делается, я полагаю, что использовать loadData () грязно;как в предыдущем примере, и я попытался использовать Effect с чем-то вроде этого: 

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

, но затем я получил предупреждение типа «loadData должна быть зависимостью от useEffect».Если я опущу второй аргумент для useEffect, похоже, что это то же самое, что поместить его непосредственно в MyComponent.Итак, в основном, мой вопрос, в этом примере, каков наилучший способ загрузки данных один раз, когда компонент смонтирован?и, конечно же, при смене реквизита / состояния, как лучше перезагрузить его, если это необходимо?

РЕДАКТИРОВАТЬ: предупреждение, которое я получаю с помощью useEffect: 

[Warning] ./src/list/main.js (1.chunk.js, line 25568)
Line 53:  React Hook useEffect has a missing dependency: 'loadData'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

1 Ответ

2 голосов
/ 20 сентября 2019

Способ использования useEffect заключается в том, что всякий раз, когда что-то изменяется в массиве зависимостей, React запускает этот эффект 

useEffect(() => {
  loadData();
}, [loadData]); // <-- dependencies array

Но поскольку вы объявили loadData как обычную функцию, она будет переназначена новойФункция на каждом рендере, и он будет вызывать эффект.Лучшим способом было бы обернуть вашу loadData функцию в хук useCallback 

const loadData = useCallback(async () => {
    if (!dataLoaded) {
      setDataLoaded(true);
      setData(await getDataFromHTTP());
    }
}, [])
...