Как установить useEffect для извлечения данных из API при первом рендеринге с помощью eslint-реагировать на хуки?

Question

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

const Component = (props) => {

  // init
  useEffect(() => {

    const fetchA = async () => {
      await props.fetchA()
    };

    const fetchB = async () => {
      await props.fetchB()
    };

    fetchA();
    fetchB();
  }, []);
}

fetchA и fetchB - это действия, выполняемые RedEx для выполнения запросов и сохранения данных на редукторах.
Затем я добавил eslint-response-hooks в проект. Теперь Эслинт предупреждает меня, что

Blockquote У React Hook useEffect отсутствует зависимость: «props». Либо включите его, либо удалите массив зависимостей. Однако «реквизит» изменится, когда любой реквизит изменится, поэтому предпочтительным исправлением является деструктурирование объекта «реквизит» вне вызова useEffect и обращение к этим конкретным реквизитам внутри useEffect.

Это единственный способ сделать это, применив // eslint-disable-next-line react-hooks/exhaustive-deps к строке перед зависимостями useEffect? ​​

Answer 1

Это указывает на то, что если изменяются props.fetchA и props.fetchB, ваш код не настроен для его обновления. Если вы абсолютно уверены, что хотите игнорировать изменения в props.fetchA и props.fetchB, вы можете добавить eslint-disable.

Если вы хотите, чтобы ваш код выполнял обновления при изменении props.fetchA или props.fetchB, следуйте инструкциям в предупреждении lint и сделайте что-то вроде этого:

const { fetchA, fetchB } = props;
useEffect(() => {
  // i renamed these so as not to conflict with the outer variables. Feel free to choose different names.
  const a = async () => {/* fetchA() */};
  const b = async () => {/* fetchB() */};
  a();
  b();
}, [fetchA, fetchB]);

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