React Native useEffect()重新渲染太多

Question

我有一个useEffect函数，其中redux操作被调用，数据被写入prop。我的问题是，useEffect循环多次，使服务器充斥着请求。

const { loescherData, navigation } = props;
useEffect(() => {
AsyncStorage.getItem('userdata').then((userdata) => {
if (userdata) {
console.log(new Date());
console.log(userdata);
var user = JSON.parse(userdata);
props.fetchLoescherDetails(user.standort);
setData(props.loescherData);
}
});
}, [loescherData]);

如果留空，则在接收数据之前完成呈现，内容不会更新。还有别的方法来处理这个函数吗?

Answer 1

loescherData在调用redux-actionfetchLoescherDetails后将不可用…并且通过setData更改组件将导致无限渲染，因为您当前的useEffect依赖于loescherData

所以我建议你通过传递一个empty-deps[]来执行你的redux-actiononComponentDidMount…然后在另一个effect

中消耗你的动作的输出

useEffect(() => {
AsyncStorage.getItem('userdata').then((userdata) => {
if (userdata) {
console.log(new Date());
console.log(userdata);
var user = JSON.parse(userdata);
props.fetchLoescherDetails(user.standort);
// setData(props.loescherData);
}
});
}, []);
useEffect(() => {
if (loescherData) {
//  do some with loescherData like setState
}
}, [loescherData]);