Javascript 反应+；REDUX:在REDUX状态上更改MapStateTops更新状态，但视图未按照新状态进行渲染

我的容器正在通过redux商店获取状态

我通过以下道具将此状态传递给模态盒： 例如：

但仍ModalExample视图未更新

混淆：如果我关闭并打开ModalBox或在ModalBox的输入字段中键入，则视图会根据我们的新状态发生变化。。。

---

但我希望即时模式框视图根据我们的redux状态更改进行渲染…

在redux中，状态更改通过一些操作和还原发生

您可以在这里和中的redux文档中找到它们

您正在将团队从商店接过来。如果只更新团队对象，它将不会触发任何状态更改。它只会改变对象。要更改状态，您需要执行一些操作，这些操作将携带一些有效负载

例如，“UPDATE_TEAM_NAME”操作将携带newName作为其有效负载，而reducer（纯函数）将返回一个新的团队对象

---

除此之外，如果您不更新容器中的团队对象，我建议您在ModelExample组件中获取团队对象，而不是将其作为容器中的道具传递。这会让事情更清楚。

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

实际上，我的redux商店状态是，就像这样：

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
}

在reduxDevTool中可以很容易地看到更改后的redux状态

在container

mapStateToProps

中，我处理的状态是这样的

其中

console.log（state.signup.user.data）

甚至显示状态的更改，但这不会调用

componentWillReceiveProps

因此，我的视图没有呈现

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

我在MapStateTops中定义了一个以上的状态，最终解决了这个问题

---

这将触发

组件willreceiveprops

并立即呈现我的视图

您可以尝试使用componentWillReceiveProps方法处理ModalExample组件中的道具更改。。或者你可以显示一些ModalExample的代码。当我通过ModalExample更新redux存储状态时，更改的状态在reduxDevtool和mapStateToProps中清楚地显示，甚至还有console.log（this.props.data）显示更改，但问题是它没有在打开的modalbox（ModalExample）中传递props或者说它不是渲染组件…是的，我使用redux操作和还原程序更新mapDispatchToProps中的状态团队。。dispicting代码逻辑在这个.handleAddTeam.bind（这个）中，我将它传递给modalbox，它甚至正在更新redux中的团队。。问题是只有新的redux更新状态没有立即通过道具和modalbox的渲染视图。case PUSH_ADDED_团队：const newTeamState={…state}；newTeamState.data['team']=action.payload；返回新状态；

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

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

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

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