如何在 React 组件内的另一个函数中访问 useImpact 的异步数据

Question

我有一个带有 Hooks 的功能组件：

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]);那么我将获得带有console.log()输出的无限循环。

所以，我想setOptions(result.data)是异步的，就像类组件中的setState一样，但不接受在异步请求完成时使用的第二个参数。

我想在使用getOption()函数完成fetch()后修改我的options数组。

Answer 1

修改options时，您可以使用其他useEffect来执行函数：

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