REACT + REDUX：在 redux 状态更改时 mapStateToProps 更新状态，但视图未按照新状态呈现

Posted 2023-02-22

【中文标题】REACT + REDUX：在 redux 状态更改时 mapStateToProps 更新状态，但视图未按照新状态呈现

【英文标题】：REACT + REDUX: on redux state change mapStateToProps updating state but view is not rendering as per new state

【发布时间】：2017-09-21 23:19:19

【问题描述】：

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

我通过这样的道具将此状态传递给模态框： 示例：

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

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

即使在这个容器中

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 视图没有更新..

困惑：如果我关闭并打开模态框或在模态框的输入字段内键入，那么根据我们的新状态，视图会发生变化...... 但我希望根据我们的 redux 状态更改即时呈现模态框视图...

【问题讨论】：

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

当我通过 ModalExample 更新 redux 存储状态时，reduxDevtool 和 mapStateToProps 清楚地显示了更改的状态，甚至 console.log(this.props.data) 也显示了更改，但问题是它没有在里面传递道具打开 modalbox(modalExample) 或者说它不是渲染组件...

【参考方案1】：

在 Redux 中，状态变化是通过一些动作和 reducer 发生的。

您可以在 Actions 和 Reducers 的 redux 文档中找到它们。

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

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

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

【讨论】：

是的，我使用 redux 操作和 reducers 更新了 mapDispatchToProps 中的状态团队 .. 调度代码逻辑在 this.handleAddTeam.bind(this) 内部，我将它传递给了 modalbox，它甚至在 redux 内部更新了团队 .. 问题只是新的 redux 更新状态不会立即通过道具和渲染 modalbox 的视图。

case PUSH_ADDED_TEAM: const newTeamState = ...state ; newTeamState.data['team'] = action.payload;返回新团队状态；

【参考方案2】：

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

实际上，我的 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 状态

在容器 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 并立即呈现我的视图。