REACT + REDUX：在REDX状态变化mapStateToProps更新状态，但视图不按照新状态呈现

有我的容器，通过REDX存储获取状态。REACT + REDUX：在REDX状态变化mapStateToProps更新状态，但视图不按照新状态呈现

我传递这种状态通过这样的道具模式对话框：例子：

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> 
     )}

首次完美的工作...... 有团队名单，并输入字段内模态添加按钮box.so，当我做内Modalbox组件某些加载方法和更新的状态，在那里，我可以看到reduxDevTool状态变化，甚至状态是mapStateToProps但模态对话框队名单变化不更新Ø [R说modalbox道具犯规收到新道具按照状态变化......

即使在这个容器

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道具

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

但仍模态示例视图不更新..

困惑：如果我关闭并打开ModalBox或在模态框的输入字段中键入内容，则根据我们的新状态在视图中进行更改... 但是，我希望即时模式框视图呈现按照我们的还原状态更改...

来源

2017-04-25 Bijay Rai

您可以尝试通过使用componentWillReceiveProps方法来处理ModalExample组件中更改的道具，或者您可以显示ModalExample的某些代码。 –

当我通过ModalExample更新了redux存储状态时，更改的状态显然显示在reduxDevtool和mapStateToProps中，甚至是console.log（this.props.data）显示更改，但问题在于它没有在打开的modalbox（modalExample）中传递道具或者说它没有渲染组件... –

在Redux中，状态变化发生在某些动作和减速器上。

你可以在这里找到他们的文件Actions和Reducers。

您正在从商店提取团队。如果您只是更新团队对象，它不会触发任何状态更改。它只会改变对象。要改变状态，你需要一些行动，将携带一些有效载荷。

例如，“UPDATE_TEAM_NAME”操作将携带newName，因为它的有效内容和reducer（纯函数）将返回一个新的团队对象。除此之外，如果您不更新容器中的团队对象，我建议您在ModelExample组件中获取团队对象，而不是将其作为容器中的道具传递。它会让事情更清楚。

来源

2017-04-25 05:51:44

是的，我更新状态团队里面mapDispatchToProps使用redux行动和redurs .. dispactching代码逻辑是在this.handleAddTeam.bind（这），我传递给modalbox这是甚至更新团队里面的REDX ..问题只是新的更新状态并不是立即通过道具和渲染视图的modalbox。 –

你能展示减速器的逻辑吗？ –

case PUSH_ADDED_TEAM： \t \t \t const newTeTeStState = {... state}; \t \t \t newTeamState.data ['team'] = action.payload; \t \t \t return newTeamState; –

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

其实我的终极版商店状态是像这样：

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

所以，每当我更新Redux的商店球队状态阵列状

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

看到

and in container mapStateToProps我正在处理st吃了这个样子，

其中console.log(state.signup.user.data)甚至显示状态的变化，但这个亘古不变的调用componentWillReceiveProps所以，我的观点是不渲染...

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瞬间呈现我的看法..

来源

2017-04-25 07:24:39

REACT + REDUX：在REDX状态变化mapStateToProps更新状态，但视图不按照新状态呈现

回答

相关问题