Как установить 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 - это действия, выполняемые примитивом для выполнения запросов и сохранения данных на редукторах.
Затем я добавил eslint-реагировать-хуки в проект. Теперь Эслинт предупреждает меня, что

У цитаты 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.