はイムはコンパイルエラーを取得し、怒鳴るのコードでは+ typescriptです

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() {...} 

} 

なぜ私はそれを変更することができていますcontructore？それは何を読み込み専用にしていますか？

Answer 1

Never mutate this.state directly 、常にstate値を更新するsetStateを使用しています。

はこのようにそれを書く：

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

Answer 2

その他の観光スポット、その後constructor、あなたはstateを変更するsetStateメソッドを呼び出す必要があります。

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