Как получить доступ к данным useEffect asyn c в другой функции внутри компонента в React

Question

У меня есть функциональный компонент с хуками:

const Filters = () => {
  const [options, setOptions] = useState([]);

  const getOption = type => options.find(el => el.name === type);

  useEffect(() => {
    fetch('someURL')
      .then(resp => resp.json())
      .then(result => setOptions(result.data), error => console.log(error));
    // trying to check options array now
    console.log(getOption('type')); // returns undefined
  }, []);
}

Цель этого подхода - извлечь данные, а затем запустить эти данные через вычисленную функцию, чтобы получить один объект на основе getOption(type) , Если я использую useEffect(() => fetch(), [options]);, тогда я получу бесконечное l oop с console.log() выходами.

Итак, setOptions(result.data) является асинхронным c я думаю, точно так же, как setState в компоненте класса , но не принимает второй параметр для использования при выполнении асинхронного запроса c.

Я хочу изменить мой массив options после выполнения fetch() с моей функцией getOption().

Answer 1

Вы можете использовать другой useEffect для выполнения функции при изменении options:

const Filters = () => {
  const [options, setOptions] = useState([]);

  const getOption = type => options.find(el => el.name === type);

  useEffect(() => {
    fetch('someURL')
      .then(resp => resp.json())
      .then(result => setOptions(result.data), error => console.log(error));
  }, []);

  useEffect(() => {
    if (!options) {
      return;
    }

    console.log(getOption('type'));
  }, [options])
}