Setzen und Zurücksetzen von Zuständen in React.js

Question

Ich versuche, einen Abschnitt in meiner Webseite zu erstellen, wo vier Komponenten in einem 2X2-Raster angezeigt werden. Wenn Sie auf eins klicken, wird das Feld zur Mitte des Bildschirms erweitert, während die anderen ausgeblendet werden. Ich habe diesen Teil herausgefunden, indem ich SetState auf ein paar verschiedene Eigenschaften aufgerufen habe, um CSS-Klassen umzuschalten.

Worauf ich Probleme habe, ist das Zurücksetzen des Status, wenn ein "Schließen" -Knopf getreten wird, so dass die Boxen ihre ursprüngliche Form und Opazität annehmen. Ich sehe eine console.log von innerhalb der "handleCloseClick" -Funktion, so dass ich weiß, dass es eine verdrahtete Eigenschaft ist. Egal, wie ich das Array des Zustands durchlaufe, ich kann ihre Eigenschaften nicht in ihren ursprünglichen Zustand zurückverwandeln. Hier ist mein Code.

class Parent extends Component{ 
    constructor(){ 
    super(); 
    this.state = 
     attrs: {[{ 
     id: 1, 
     expand: false, 
     reduced: false, 
     seeText: false 
    }], 
    [{ 
     id: 2, 
     expand: false, 
     reduced: false, 
     seeText: false 
    }], 
    [{ 
     id: 3, 
     expand: false, 
     reduced: false, 
     seeText: false 
    }], 
    [{ 
     id: 4 
     expand: false, 
     reduced: false, 
     seeText: false 
    }]} 
    this.handleClick = this.handleClick.bind(this) 
    this.handleCloseClick = this.handleClick.bind(this) 
    } 
    /*This function works*/ 
    handleClick(e){ 
    const array = this.state.attrs 
    array.map(function(element){ 
     if(element.id === i){ 
     element.reduced = false; 
     element.expand = true; 
     element.seeText = true; 
     }else{ 
     element.reduced = true; 
     } 
    }) 
    this.seState({attrs: array}) 
    } 
    /*This function will console.log but will not setState of attrs*/ 
    handleCloseClick(){ 
    const newArray = this.state.attrs 
    newArray.map(function(element(){ 
     element.expand = false; 
     element.reduced = false; 
     element.seeText = false; 
    }) 
    this.setState(attrs: newArray}) 
    } 
    render(){ 
    const newEls = this.state.attrs; 
    return(
     {newEls.map(function(newEl, index)){ 
     return <Child key={index} onClick={this.handleClick(el)} onCloseClick={this.handleCloseClick()} /> 
     } 
    ) 
    } 
} 

Bitte helfen! Warum wird sich der verdammte Staat nicht zurückziehen?!?!

Answer 1

Es gibt ein paar Probleme ... gibt ein neues Array zurück, es ändert nicht den bestehenden Zustand. Sie müssen es also einer Variablen zuweisen, um die Änderungen zu sehen.

Sie müssen auch einen Wert in .map zurückgeben, oder verwenden Sie einen "implicit" return({ vs {.

handleCloseClick(){ 
 
    const newArray = this.state.attrs.map(element => ({ 
 
    element.expand = false; 
 
    element.reduced = false; 
 
    element.seeText = false; 
 
    })) 
 
    this.setState(attrs: newArray}) 
 
}

Sie können auch Ausgangszustand in seine eigene Methode bewegen, dann im Konstruktor verwenden und wann Sie wollen es zurücksetzen ...

constructor() { 
 
    ... 
 
    this.state = this.initialState(); 
 
    } 
 
    
 
    close() { 
 
    this.setState(this.initialState()); 
 
    } 
 
    
 
    initialState() { 
 
    return { 
 
     attrs: [ 
 
     [{ 
 
      id: 1, 
 
      expand: false, 
 
      reduced: false, 
 
      seeText: false 
 
     }], 
 
     [{ 
 
      id: 2, 
 
      expand: false, 
 
      reduced: false, 
 
      seeText: false 
 
     }], 
 
     [{ 
 
      id: 3, 
 
      expand: false, 
 
      reduced: false, 
 
      seeText: false 
 
     }], 
 
     [{ 
 
      id: 4 
 
      expand: false, 
 
      reduced: false, 
 
      seeText: false 
 
     }]} 
 
    ]} 
 
    }