返回时，屏幕状态未从AsyncStorage更新

Question

我正在构建一个React Native应用程序。 我的应用程序有5个屏幕：主页（initialRouteName），DeckPage，QuestionPage，NewCardPage，NewDeckPage。 （按此顺序） 我正在使用Redux进行状态管理。状态正在从AsyncStorage更新。 通过派遣componentDidMount中的“获取”功能，完成获取的组件就是类组件“主页”。

组件NewCardPage，NewDeckPAge还通过在按下按钮时分派与Home相同的提取功能来用新内容更新状态。

当我想从DeckPage父组件内部删除Deck组件时出现我的问题。完成此任务的功能具有以下功能：从AsyncStorage删除项目后，更新STATE，然后移回Screen HOME。问题是，当我返回HOME组件时，状态不会使用AsyncStorage的最新信息进行更新。 当我在其他2个组件NewCardPage，NewDeckPage中执行相同的操作时，情况并非如此。

我将粘贴以下代码：

import React, { Component } from "react";
import { connect } from "react-redux";
import { View, Text, StyleSheet, FlatList } from "react-native";
import Header from "../components/Header";
import AddDeckButton from "../components/AddDeckButton";
import DeckInList from "../components/DeckInList";
import { receiveItemsAction } from "../redux/actions";

class Home extends Component {
  
   componentDidMount() {
    this.props.getAsyncStorageContent();
  }


  renderItem = ({ item }) => {
    return <DeckInList {...item} />;
  };

  render() {
    const { items } = this.props;
    // console.log(items);

    const deckNumber = Object.keys(items).length;
    return (
      <View style={styles.container}>
        <Header />
        <View style={styles.decksInfoContainer}>
          <View style={styles.deckNumber}>
            <View style={{ marginRight: 50 }}>
              <Text style={styles.deckNumberText}>{deckNumber} Decks</Text>
            </View>
            <AddDeckButton />
          </View>

          <View style={{ flex: 0.9 }}>
            <FlatList
              data={Object.values(items)}
              renderItem={this.renderItem}
              keyExtractor={(item) => item.title}
            />
          </View>
        </View>
      </View>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    items: state.items,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    getAsyncStorageContent: () => dispatch(receiveItemsAction()),
  };
};

----------- DECKPAGE组件------------

import React from "react";
import { View, StyleSheet } from "react-native";
import Deck from "../components/Deck";
import { useSelector, useDispatch } from "react-redux";
import { removeItemAction, receiveItemsAction } from "../redux/actions";
import AsyncStorage from "@react-native-community/async-storage";

const DeckPage = ({ route, navigation }) => {
  
  const { title, date } = route.params;
  const questions = useSelector((state) => state.items[title].questions);
  const state = useSelector((state) => state.items);

  const dispatch = useDispatch();
  // const navigation = useNavigation();

  const handleRemoveIcon = async () => {
    await AsyncStorage.removeItem(title, () => {
      dispatch(receiveItemsAction());
      navigation.goBack();
    });
  };

  console.log(state);
  return (
    <View style={styles.deckPageContainer}>
      <Deck
        handleRemoveIcon={handleRemoveIcon}
        title={title}
        questions={questions}
        date={date}
      />
    </View>
  );
};

-----------这是我的ACTIONS文件----------

import AsyncStorage from "@react-native-community/async-storage";
export const RECEIVE_ITEMS = "RECEIVE_ITEMS";
// export const REMOVE_ITEM = "REMOVE_ITEM";

export const receiveItemsAction = () => async (dispatch) => {
  const objectValues = {};
  try {
    const keys = await AsyncStorage.getAllKeys();
    if (keys.length !== 0) {
      const jsonValue = await AsyncStorage.multiGet(keys);
      if (jsonValue != null) {
        for (let element of jsonValue) {
          objectValues[element[0]] = JSON.parse(element[1]);
        }
        dispatch({
          type: RECEIVE_ITEMS,
          payload: objectValues,
        });
      } else {
        return null;
      }
    }
  } catch (e) {
    console.log(e);
  }
};

-----这是我的REDUCERS文件----

import { RECEIVE_ITEMS, REMOVE_ITEM } from "./actions";

const initialState = {
};

const items = (state = initialState, action) => {
  switch (action.type) {
    case RECEIVE_ITEMS:
      return {
        ...state,
        ...action.payload,
      };
    // case REMOVE_ITEM:
    //   return {
    //     ...state,
    //     ...action.payload,
    //   };

    default:
      return state;
  }
}

export default items;

-----这是我的UTILS文件----

import AsyncStorage from "@react-native-community/async-storage";



export const removeDeckFromAsyncStorage = async (title)=>{
  try{
    
    await AsyncStorage.removeItem(title);
  }
  catch(e){
    console.log(`Error trying to remove deck from AsyncStorage ${e}`);
  }
}