无法在 react+typescript 中更改状态界面答案

【问题标题】：Cannot change state interface in react+typescript无法在 react+typescript 中更改状态界面
【发布时间】：2017-05-31 07:03:47
【问题描述】：

在下面的代码中，我得到一个编译错误，我不能在 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() {...}

}

为什么我可以在 contructore 中更改它？是什么使它只读？

【问题讨论】：

@AndrewLi 不是很含蓄吗？为什么我需要 decalre 类型？在继承时它已经贴花了..

标签： reactjs typescript

【解决方案1】：

Never mutate this.state directly，始终使用setState 来更新state 值。

这样写：

closeLeftCol() {
     this.setState(prevState => ({
          leftWidth : "0",
          rightWidth : "100%",
          leftClassName : prevState.leftClassName + " hideme",
          rightClassName : prevState.rightClassName + " full"
     }));             
}

【讨论】：

我们可以在 setState 中使用= 吗？不应该是合法的js对象吗？
抱歉我的错误（复制粘贴错误），我们不能使用=，因为它是我们需要使用: 的对象。检查更新的答案:)
但后来我失去了打字稿类型提示。它在 setstate 中并不“强”
有趣的是，您链接的页面还说this.state 应该直接从构造函数中设置，而不是在那里使用setState。 reactjs.org/docs/react-component.html#constructor
@WiredPrairie，我想你会感到困惑，这意味着在构造函数之外总是使用 setState 来更新状态值，但要先更新一些东西，我们需要初始化。所以在构造函数中首先我们必须定义状态对象，setState 将不起作用（因为 setState 用于更新）。一旦我们定义了状态对象，我们就需要使用 setState，希望你能明白:)

【解决方案2】：

其他地方然后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"
                }
            })
        }

【讨论】：

但后来我失去了打字稿类型提示。它在 setstate 中并不“强”
@Shazam 您只能使用 setState 更新状态。没有其他方法。但是，您可以通过两种方式使用setState - 通过传递新状态对象，或通过传递返回新状态的函数。我已经更新了答案。检查它是否适合您。抱歉，我不太关心打字稿类型提示。