react-native - 使用 Redux 在屏幕之间共享状态的问题 - React native

Question

我有一个可以更新所有日记信息的屏幕。此屏幕显示日记的当前状态。在这个屏幕上，日记是从 redux 存储加载的，使用 useSelector。

// Array
const diaryData = useSelector(({diaryState}) => diaryState.data);
// Array index
const diaryIndex = useSelector(({diaryState}) => diaryState.index);

const [diary, setDiary] = useState();

  useEffect(() => {
    console.log('im here');
    setLoad(true);
    setDiary(diaryData[diaryIndex]);
    setLoad(false);
  }, [diaryData, diaryIndex]);

要编辑日记信息，我需要导航到另一个屏幕，如下所示：

 navigation.navigate('DiaryIndoorInfo', {
                        from: 'DiaryEdit',
                        diaryData,
                        diaryIndex,
                      });

// Getting at next screen

const diaryData = navigation.state.params.diaryData;
const diaryIndex = navigation.state.params.diaryIndex;
const diary = diaryData[diaryIndex];

到目前为止，还好……

现在，这个日记信息也可以更新和 redux 存储了。像这样：

diary.growDimens = growDimens;
diary.lightingType = lightingType;
diary.lumens = lumens;

diaryData[diaryIndex] = diary;
// object is correct
console.log(`dispached: ${JSON.stringify(diaryData)}`);
dispatch(diaryFetchSuccess(diaryData));

并回到我来自的屏幕：

navigation.goBack();

当我返回 DiaryEdit 屏幕时，useEffect 剂量起作用。我希望在商店修改日记信息后，页面可以呈现更新的信息。难道我做错了什么？

const diaryData = useSelector(({diaryState}) => diaryState.data);
  const diaryIndex = useSelector(({diaryState}) => diaryState.index);

  const [diary, setDiary] = useState();

  useEffect(() => {
    // This message is not printed on navigation go back.
    console.log('im here');
    setLoad(true);
    setDiary(diaryData[diaryIndex]);
    setLoad(false);
  }, [diaryData, diaryIndex]);

标签： react-nativereduxreact-reduxreact-hooksuse-effect