javascript - 更新 Redux 存储后，我的组件不会重新呈现

Question

我有这个菜单组件，其中菜单上下文根据用户输入而改变。

例如，如果用户单击菜单中的“预订”按钮(图 1)，则网站正文将更改，菜单上下文将更改以处理预订功能(图 2)<---(所需行为)，但是，组件挂载后停止重新渲染。

图 1:|主页 |预订 | ... |等等

图2:| < |进行预订 | ... |等等

我试过的:

看起来商店中的值正在更改并发送到组件。我尝试使用 componentWillReceiveProps() 但这没有用。

这是我的菜单组件的示例:

import React, { Component } from 'react';
//redux thingy
import {connect} from 'react-redux';

class DefualtMenu extends Component {


  render() {
    return (
      <div className="Defult-Menu-Main-Div">
        <div className="box1">
          <div className="box11" onClick={() => this.props.HandleMenuClick(this.props.MenuBoxes.box11)}>
            <h3 className="boxh3" onClick={() => this.props.HandleMenuClick(this.props.MenuBoxes.box11)}>
              {this.props.MenuBoxes.box11}
            </h3>
          </div>
        </div>
      </div>
    );
  }
}

const mapDispachToProps = (dispach) => {
  return {
    HandleMenuClick: (buttomName) => {
      switch (buttomName){
        case "RESERVATION":{
          dispach({type: "HANDLE_BODY_CHANGE_RESERVATION"})
          break;
        }
      }
    } 
  }
}

const mapStateToProps = (state) => {
  return {
    MenuBoxes: state.MenuBoxes
  }
}

export default connect(mapStateToProps, mapDispachToProps) (DefualtMenu);

这里是我处理 Action 的方式:

const reducer = (state = initial_state, action) => {
    const new_state = {...state};

    switch (action.type) {
        }
        case "HANDLE_BODY_CHANGE_RESERVATION": {
            new_state.body = 'reservation';
            if(new_state.userType == 'customer'){
                new_state.MenuBoxes.box11 = '◄'
                new_state.MenuBoxes.box12 = 'DELETE A \n RESERVATION'
                new_state.MenuBoxes.box13 = ''
                new_state.MenuBoxes.box21 = 'MAKE A \n RESERVATION'
                new_state.MenuBoxes.box22 = 'REVIEW \n RESERVATIONS'
                new_state.MenuBoxes.box23 = ''
                new_state.MenuBoxes.box31 = 'UPDATE A \n RESERVATION'
                new_state.MenuBoxes.box32 = ''
                new_state.MenuBoxes.box33 = ''}
            break;
        }
    return new_state;
};

更新

我控制台记录我的状态:这是我登录管理员帐户时的状态:菜单组件确实在此阶段挂载，一切正常。

MenuBoxes:
box11: "HOME"
box12: "COUPONS"
box13: ""
box21: "RESERVATION"
box22: "ABOUT US"
box23: ""
box31: "INVENTORY"
box32: "SETTING"
box33: "SIGNOUT"
__proto__: Object
SingInfailureMessege: ""
body: "homepage"
isSignIn: true
showMenu: "default"
userType: "admin"
username: "admin"

当我点击预订时-> 菜单组件已经安装在这里并且状态也发生了变化但是该组件没有重新渲染并更改 Prop

MenuBoxes:
box11: "◄"
box12: "DELETE A ↵ RESERVATION"
box13: ""
box21: "MAKE A ↵ RESERVATION"
box22: "REVIEW ↵ RESERVATIONS"
box23: ""
box31: "UPDATE A ↵ RESERVATION"
box32: ""
box33: ""
__proto__: Object
SingInfailureMessege: ""
body: "reservation"
isSignIn: true
showMenu: "default"
userType: "admin"
username: "admin"

Answer 1

我不同意，你不需要这些:

componentWillReceiveProps(nextProps) // maybe not this one
componentDidUpdate(prevProps) // probably this one
shouldComponentUpdate(nextProps, nextState) // possibly this one but not likely

我的意思是这就是 react 和 redux 的目的，状态改变 -> 检查 props 是否改变 -> 如果是则重新渲染。上面的函数对于比这个复杂得多的情况很有用。

问题出在你的 reducer 的编写方式上。请尝试做一些更简单的事情以进行测试。请为初学者尝试此开关:

  switch (action.type) {
    case "HANDLE_BODY_CHANGE_RESERVATION":
      return { ...state, MenuBoxes: { box11: "test" } };
      break;
    default:
      return state;
      break;
  }

我相信它会起作用。然后开始变得更复杂。

最后我推测错误出在你处理 reducer 状态的方式上。永远不要这样做:

const new_state = {...state};

通过这样做，您可以直接改变下方的状态(我们从不这样做)。

你应该这样做的方式是创建一个包含所有状态变化的新对象:

let new_state = {};
...
new_state.body = "reservation";
new_state.MenuBoxes = {};
new_state.MenuBoxes.box12 = "DELETE A \n RESERVATION";

最后返回之前的状态以及这样的变化:

 return { ...state, ...new_state };

我不是专家，但我认为，现在你改变状态，所以新状态 = 旧状态 => 不需要重新渲染