react-native - 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]);

如果我将其留空，则渲染在接收数据之前完成，并且内容不会更新。还有其他方法可以使用此功能吗？

标签： react-native

Answer 1

loescherData调用你的 redux-action 后将不可用fetchLoescherDetails......并且更改组件setData将导致无限渲染，因为你的 currentuseEffect依赖于loescherData

所以我建议你onComponentDidMount通过将一个空的deps传递[]给你的效果来执行你的redux-action ...然后以不同的方式使用你的action的输出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]);