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

Question

我的情况是这样的:

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(或将其传递给子组件并让子组件调用它)。

Answer 1

你有一个无限循环:发送到 useEffect() 的第二个参数是依赖项数组。每次这些依赖项之一发生更改时，都会调用 useEffect() 的第一个参数(回调)。所以你在这里:

每次 item 更改时 - 运行更改 item 的代码(因为回调使用 setItem 设置值)

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