reactjs - Redux:子操作后更新父组件数据

Question

在初始 Axios 调用后，我在 store 中加载了一些数据。

然后我渲染两个组件 match (父组件)和 player (子组件)。

这是以相关方式显示两个组件的方法(这是我原始代码的简化示例，在这个示例中我可以用另一种方式解决我的问题，但在我复杂的实际代码中，必须这样做首先在子组件中进行操作):

match.js

class Match extends Component {

  constructor(props) {
    super(props);
  }
 
  render() {
    return (    
      Object.values(this.props.matchs).map(( match_id ) => {
        let match = this.props.matchs[match_id];
        return (
         <div key={match_id}>
          <p>{match.tournament}</p>          
          <p>{match.color}</p> {/* this color depends of children condition*/ }
          <div className="players">
              {match.array_players.map ( ( player_id ) => {
                let player = this.props.players[player_id];
                  return (
                    <Player key={odd_id} ownPlayer={player} />
                  )
                })
          </div>
         </div> 
       )
      });    
    )  
  }
  
}

const mapStateToProps = state => {  
    return {
      matchs: state.matchs.matchs,
      players: state.players.players      
    };
  }
  
  const mapDispatchToProps = dispatch => {
    return {
      // actions
    };
  }
export default connect(mapStateToProps, mapDispatchToProps)(Matchs);

player.js

class Player extends Component {

  constructor(props) {
    super(props);
  } 

  render() {    
    
    return (

        <div>
          <p>{this.props.ownPlayer.name}</p>
          <p>{this.props.player_color}</p>
        </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {

  // I need to make some previous operations before render
  let player_color;
  if (ownProps.ownPlayer.name == "paul")
    player_color = 'yellow';
  else
    player_color = 'blue';
    
  // Then I Need to update parent component with children color condition
  // if (player_color == 'yellow')
  //  match_color = 'yellow'
  //    
  // Call some action here to update parent component???
  // things like these do not work: 
  // let id_p = ownProps.player.id_player;
  // state.players.players[id_p].color = 'blue'; This does not work


  return {    
    player_color
  };
};

const mapDispatchToProps = dispatch => {
  return {
    //
    }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Player);

然后我需要在子组件中满足某些条件后更新父组件中的 prop。

我读过这篇文章:

https://redux.js.org/docs/recipes/ComputingDerivedData.html

但我不知道如何在渲染之前发送数据来存储和刷新父组件。

我考虑过调用 componentWillMount 或 componentWillUpdate 中的操作来将数据发送到存储，但我不知道这是否是正确的方法。

Answer 1

在生命周期内调用操作没有任何问题，不建议在渲染方法内执行此操作，因为它会触发无限操作，但在您的情况下，如果您确实必须在子组件内进行此计算，我相信您应该在 componentWillReceiveProps 或 ComponentDidMount 内分派(dispatch)此操作，在某些情况下，您实际上必须在两个地方都执行此操作。

加油!