我的情况是这样的:
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(或将其传递给子组件并让子组件调用它)。
最佳答案
你有一个无限循环: 发送到 useEffect() 的第二个参数是依赖项数组。每次这些依赖项之一发生更改时,都会调用 useEffect() 的第一个参数(回调)。所以你在这里:
每次 item
更改时 - 运行更改 item
的代码(因为回调使用 setItem
设置值)
注意:useEffect 也会首先调用一次发送给它的回调。
关于javascript - useEffect 在循环中调用异步函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65942878/