React Native useEffect() 重新渲染太多

Question

我有一個 useEffect function ，其中調用了 redux 動作並將數據寫入道具。 我的問題是 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]);

如果我將其留空，則渲染在接收數據之前完成，並且內容不會更新。 還有其他方法可以使用這個 function 嗎？

Answer 1

loescherData在調用你的 redux-action fetchLoescherDetails后將不可用......並且通過setData更改組件將導致無限渲染，因為你當前的useEffect依賴於loescherData

因此，我建議您通過將 empty-deps []傳遞給您的效果來執行您的 redux-action onComponentDidMount ...然后以不同的effect使用您的操作的 output

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