Kann nicht Zustand Schnittstelle ändern in reagieren + Typoskript

Question

Im unten Code, im einen Kompilierungsfehler bekommen, kann ich nicht den Zustand, in closeLeftCol ändern: 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() {...} 

} 

Warum bin ich in der Lage, es zu ändern in der Bauherr? Was macht es nur lesen?

Answer 1

Never mutate this.state directly, immer setState verwenden, um die state Werte zu aktualisieren.

schreiben es so:

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

Answer 2

Andere Orte dann constructor, müssen Sie setState Methode aufrufen state ändern.

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