Redux 状态发生变化,但当我回到屏幕时组件不会重新渲染

Redux state change but the component don't re render whene I back to the screen

我有两个屏幕,A 和 B。它们都使用相同的全局状态

<Text style={Styles.textScoreHeader}>{this.props.profleInfos.Points}</Text>

使用这个:

const mapStateToProps = (state) => {
  return {
    folder: state.account.folder,
    theme: state.account.theme,
    whichAccount: state.account.whichAccount,
    profleInfos: state.account.profleInfos,
  };
};
export default connect(mapStateToProps)(ScreenA);

屏幕A 和:

const mapStateToProps = (state) => {
  return {
    folder: state.account.folder,
    theme: state.account.theme,
    whichAccount: state.account.whichAccount,
    profleInfos: state.account.profleInfos,
  };
};
export default connect(mapStateToProps)(ScreenB);

对于屏幕 B。

在屏幕 A 中,我单击一个按钮转到屏幕 B,我在其中更改 profleInfos.Points 全局状态,如下所示:

_Transaction(folder, apiName, code) {
  Transaction(folder, apiName, code).then(data => {
    if (data.success) {
      var theProfleInfos = this.props.profleInfos 
      theProfleInfos.Points = data.LoyPoints //changing profleInfos.Points
      const actionProfileInfos = { type: "SET_PROFILE_INFOS", value: theProfleInfos }
      this.props.dispatch(actionProfileInfos) // dispatch the action
    }
    this.setState({ scanningResponse: data, isLoading: false })
  })
};

我使用this.props.dispatch(actionProfileInfos)而不是mapdispatchtoprops(告诉我是否必须这样做,但我更喜欢这种方法)。
在此屏幕 (B) 中,我显示 this.props.profleInfos.Points 并且它工作正常(扫描后值发生变化)但是当我返回屏幕 A(后退按钮)时 this.props.profleInfos.Points 不刷新。

PS。我在抽屉里有相同的值,如果我打开抽屉我可以看到相同值的变化,可能是因为我 'open' 抽屉

我能够在屏幕 A 中使用 useFocusEffect 解决问题:这个 link 帮助了我 see the class component part

这是我的代码:

   import { useFocusEffect } from '@react-navigation/native';

function Reloader({ api }) {
  useFocusEffect(
    React.useCallback(() => {
      api();
    }, [])
  );
  return null;
}

// ...

class ScreenA extends React.Component {
  // ...

  _getProfileInfo(folder, apiName, LoyPhone, LoyRef, LoyCardNum) {
    getPeintreInfo(folder, apiName, LoyPhone, LoyRef, LoyCardNum).then(data => {
      const actionProfileInfos = { type: "SET_PROFILE_INFOS", value: data }
      this.props.dispatch(actionProfileInfos)
    })
  }

  render() {
    return (
        <>
        <Reloader
          api={() => this._getProfileInfo(this.props.folder, 'GetProfileInfos.php', 'empty', 1, 'empty') />
            {/* rest of ScreenA component */ }
        </>
      );
    }
  }