时间戳

首页 > 解决方案 > 在循环中调用异步函数的 useEffect

javascript - 在循环中调用异步函数的 useEffect

问题描述

我的情况是这样的：

export default function Component({ navigation }) {
    const [ item, setItem ] = useState([]);
    
    useEffect(() => {
        AsyncStorage.getItem('someItem')
        .then(data => JSON.parse(data))
        .then(jsonData => {
            setItem(jsonData);
        })
        .catch(error => {});
    }, [item]);

问题是 useEffect 似乎是在循环中调用的，即使“item”没有改变。如果我从依赖项数组中删除项目，它只会被调用一次，并且当项目更改时，组件不会重新渲染。有解决办法吗？

像这样解决：

export default function Component({ navigation }) {
        const [ item, setItem ] = useState([]);
        const [ update, setUpdate ] = useState(false);

        const handleUpdate = () => {
            setUpdate(!update);
        }
        
        useEffect(() => {
            AsyncStorage.getItem('someItem')
            .then(data => JSON.parse(data))
            .then(jsonData => {
                setItem(jsonData);
            })
            .catch(error => {});
        }, [update]);

当我想更新项目的状态时，然后调用 handleUpdate （或将其传递给子组件并让子组件调用它）。

标签： javascriptreactjsreact-native

解决方案

你有一个无限循环：你发送的第二个参数useEffect()是一个依赖数组。每次这些依赖项中的一个发生更改时 -useEffect()将调用作为回调的第一个参数。所以在这里你做：

每次item更改 - 运行更改item的代码（因为回调设置值setItem）

注意：useEffect 也会首先调用一次发送给它的回调。

推荐阅读