無法更改狀態界面反應+打字稿

Question

在婁代碼，即時得到一個編譯錯誤，我不能在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() {...} 

} 

爲什麼我能夠改變它在構造？是什麼讓它只讀？

Answer 1

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

寫這樣的：

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

Answer 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" 
       } 
      }) 
     }