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

我有这个菜单组件,其中菜单上下文根据用户输入而变化.

例如,如果用户单击菜单中的RESERVATION按钮(图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);

这是我如何处理操作：

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

更新

我console.log我的状态：
这是我登录到管理员帐户时的状态：
菜单组件确实在此阶段安装,一切都很好.

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"

当我点击预订
->菜单组件已经安装在这里,状态也改变了,但是
组件没有重新渲染并更改道具

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"

最佳答案

我不同意,您不需要任何这些：

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

我的意思是,这是反应和还原的目的,状态更改->检查道具是否更改->如果是,则重新渲染.上面的功能对于比这更复杂的情况很有用.

错误的是减速器的编写方式.请尝试进行一些简单的测试.对于初学者,请尝试使用此开关：

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

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

最后,我推测错误在于您在化简器中处理状态的方式.永远不要这样做：

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

我不是专家,但我认为,现在您要变异状态,因此新状态=旧状态=>无需重新渲染

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

猜你在找的JavaScript相关文章