Javascript 如何访问useEffect'；在React中的组件内的另一个函数中创建异步数据

我有一个带有挂钩的功能组件：

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）

获取单个对象。如果我使用

useffect（（）=>fetch（），[options]）然后我将使用
console.log（）
输出得到无休止的循环

因此，
setOptions（result.data）
是异步的，就像类组件中的
setState
一样，但不接受在异步请求完成时使用的第二个参数

在使用我的
getOption（）
函数执行
fetch（）
后，我想修改我的
options
数组。
当修改
options
时，可以使用另一个
useffect
来执行函数：

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])
}

解决方案可以是绕过这个问题，编写一个系统，该系统“接受”同步请求以“执行”异步操作，并使用查询系统检查异步函数的状态。基本上是一个围绕承诺的高级界面。。。。但我希望有比这更好的解决方案。这是可行的，但我有一个问题，为什么我有两个控制台输出？第一个是未定义的

，第二个是实际数据，如预期的那样。但是为什么第一个命令甚至会使用未定义的数据触发呢？似乎我理解这一点，它会激发

未定义的
，因为在装载的阶段上，我的
选项
数组是空的，然后当从API填充选项时，我会在控制台中获得正确的数据输出。但是有没有更优雅的方法呢？正如React文档中提到的：
传递给useEffect的函数将在呈现提交到屏幕后运行。
意味着组件第一次呈现（提取尚未结束）时，将执行
控制台.log
，从而执行
未定义的
。看：是的，我现在才明白，但是有更好的方法吗？在单个组件中使用多个
useffect（）
是否完全合适？我已经编辑了我的答案。您可以在执行函数之前检查是否定义了
options
不阻止组件安装阶段上未定义的控制台输出。