![](/img/trans.png)
[英]React+typescript : How to change the state if I take it in as an array?
[英]Cannot change state interface in react+typescript
在下面的代码中,出现编译错误,我无法在closeLeftCol中更改状态: Cannot assign to leftWidth because it is a constant or read only property
:
interface ILayoutState{
rightClassName: string,
leftClassName: string,
leftWidth: string,
rightWidth : string
}
export default class Layout extends React.Component<undefined, ILayoutState> {
constructor(props) {
super(props);
this.state = {
rightClassName: "right-col slide-in", leftClassName: "left-col slide-in", leftWidth: '' ,rightWidth : '' };
}
closeLeftCol() {
this.state.leftWidth = "0";
this.state.rightWidth = "100%";
this.state.leftClassName += " hideme";
this.state.rightClassName += " full";
this.forceUpdate();
}
render() {...}
}
切勿直接更改this.state ,始终使用setState更新state
值。
像这样写:
closeLeftCol() {
this.setState(prevState => ({
leftWidth : "0",
rightWidth : "100%",
leftClassName : prevState.leftClassName + " hideme",
rightClassName : prevState.rightClassName + " full"
}));
}
然后在其他Places constructor
,则需要调用setState
方法来更改state
。
closeLeftCol() {
this.setState({
//change state here
leftWidth: "0",
rightWidth: "100%",
leftClassName: this.state.leftClassName + " hideme",
rightClassName: this.state.rightClassName + " full"
})
//or use this way
this.setState((prevState)=>{
return {
//change state here
leftWidth: "0",
rightWidth: "100%",
leftClassName: prevState.leftClassName + " hideme",
rightClassName: prevState.rightClassName + " full"
}
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.