有我的容器通过redux商店获得状态。
我通过这样的道具将此状态传递给模态框:示例:
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甚至状态中看到状态更改是mapStateToProps的变化但模态框队列表没有更新或说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}
但仍然ModalExample视图没有更新..
令人困惑:如果我关闭并打开ModalBox或输入模态框的内部输入字段,那么根据我们的新状态,视图会发生变化...但我希望根据我们的redux状态更改即时模态框视图渲染...
我不确定这是不是最好的方式。但最近我像这样解决了我的问题......
实际上,我的redux商店状态是这样的:
user: {
data: [
id: 1,
key: 'exampleKey',
name: 'exampleName',
team: [
{email: 'one', role: 'one'},
{email: 'two', role: 'two'}
]
],
error: null
}
所以,每当我更新redux store状态团队数组时
user: {
data: [
id: 1,
key: 'exampleKey',
name: 'exampleName',
team: [
{email: 'one', role: 'one'},
{email: 'two', role: 'two'},
{email: 'three', role: 'three'}
]
],
error:null
}
在reduxDevTool中可以很容易地看到改变的redux状态
在容器mapStateToProps
我处理这样的状态,
其中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
并立即呈现我的视图。