例如,如果用户单击菜单中的RESERVATION按钮(图1),则网站主体将更改,并且菜单上下文将更改为处理保留功能(图2)< ---(期望的行为),但是组件停止组件安装后重新渲染.
图.1：
|主页|预订| … |等等
图2：
| < |预订| ... |等等
我试过了
看起来存储中的值正在更改并也发送到组件.
我尝试使用componentWillReceiveProps(),但这没有用.
这是我的菜单组件的示例：
@H_502_14@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);
这是我如何处理操作：
@H_502_14@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"
最佳答案
我不同意,您不需要任何这些：
@H_502_14@
原文链接：https://www.f2er.com/js/531217.htmlcomponentWillReceiveProps(nextProps) // maybe not this one
componentDidUpdate(prevProps) // probably this one
shouldComponentUpdate(nextProps,nextState) // possibly this one but not likely
我的意思是,这是反应和还原的目的,状态更改->检查道具是否更改->如果是,则重新渲染.上面的功能对于比这更复杂的情况很有用.
错误的是减速器的编写方式.请尝试进行一些简单的测试.对于初学者,请尝试使用此开关：
@H_502_14@ switch (action.type) {
case "HANDLE_BODY_CHANGE_RESERVATION":
return { ...state,MenuBoxes: { Box11: "test" } };
break;
default:
return state;
break;
}
我相信它会起作用.然后开始变得更加复杂.
最后,我推测错误在于您在化简器中处理状态的方式.永远不要这样做：
@H_502_14@const new_state = {...state};
这样,您可以直接在下面进一步修改状态(我们从不这样做).
您应该这样做的方法是创建一个新对象,其中包括状态的所有更改：
@H_502_14@let new_state = {};
...
new_state.body = "reservation";
new_state.MenuBoxes = {};
new_state.MenuBoxes.Box12 = "DELETE A \n RESERVATION";
最后返回先前的状态以及如下更改：
@H_502_14@ return { ...state,...new_state };
我不是专家,但我认为,现在您要变异状态,因此新状态=旧状态=>无需重新渲染
