javascript - react + REDUX : on redux state change mapStateToProps updating state but view is not rendering as per new state

Question

我的容器正在通过 redux store 获取状态。

我通过这样的 Prop 将这个状态传递给模态框:示例:

render(){
  let {team,id} =this.props.data;
    return(
    <div>
    <ModalExample isOpen={this.state.isOpen} team={team} id={id}
modalClose={this.modalClose.bind(this)} 
handleAddTeam={this.handleAddTeam.bind(this)}/>
        </div>
        )}

第一次完美运行...模态框中有团队列表和带有添加按钮的输入字段。所以，当我在 Modalbox 组件 中执行某些添加方法并更新状态时，我可以在 reduxDevTool 中看到状态变化，甚至 state 也在 ma​​pStateToProps 中发生变化但是模态框团队列表未更新或说模态框 Prop 未根据状态更改收到新 Prop ...

即使在这个容器中

render(){
  let {team,id} =this.props.data;
    console.log(this.props.data) **//Here state change is shown**
    console.log(team) **//Here state is not changed**
    return(
    <div>
    <ModalExample isOpen={this.state.isOpen} team={team} id={id}
modalClose={this.modalClose.bind(this)} 
handleAddTeam={this.handleAddTeam.bind(this)}/>
        </div>
        )}

另外，我尝试通过这两种方式在 ModalExample 中传递 Prop

team={this.props.data} , team={team} 

但 ModalExample View 仍然没有更新..

令人困惑:如果我关闭并打开 ModalBox 或在模态框的输入字段中键入内容，则 View 会根据我们的新状态发生变化...但我希望根据我们的 redux 状态更改即时呈现模态框 View ...

Answer 1

我不确定这是不是最好的方法。但是最近我这样解决了我的问题......

实际上，我的 redux store 状态是像这样的:

user: {
    data: [
        id: 1,
        key: 'exampleKey',
        name: 'exampleName',
        team: [
            {email: 'one', role: 'one'},
            {email: 'two', role: 'two'}
        ]
    ],
    error: null
}

所以，每当我像这样更新 redux store state team 数组时

user: {
    data: [
        id: 1,
        key: 'exampleKey',
        name: 'exampleName',
        team: [
            {email: 'one', role: 'one'},
            {email: 'two', role: 'two'},
            {email: 'three', role: 'three'}
        ]
    ],
    error:null
}

更改后的 redux 状态可以在 reduxDevTool 中轻松看到

在容器 mapStateToProps 中，我是这样处理状态的，

console.log(state.signup.user.data) 甚至显示状态的变化，但这不会调用 componentWillReceiveProps 所以，我的 View 没有呈现。 ..

const mapStateToProps = (state) => {
    return {
        user: state.signup.user.data,
    };
};

我最终通过在 mapStateToProps 中定义一个状态来解决这个问题

const mapStateToProps = (state) => {
    return {
        user: state.signup.user.data,
        teamMember:state.signup.user.data.team,
    };
};

这会触发 componentWillReceiveProps 并立即呈现我的 View 。