React.jsの状態の設定とリセット

Question

2X2グリッドに4つのコンポーネントが表示されているWebページにセクションを作成しようとしています。 1つをクリックすると、ボックスは画面の中央に展開され、他はフェードアウトします。私はいくつかの異なるプロパティでsetStateを呼び出してCSSクラスを切り替えることでその部分を理解しました。

私が問題を抱えているのは、ボックスが元の形状と不透明度をとるように「閉じる」ボタンがキックされたときの状態をリセットすることです。私は "handleCloseClick"関数内からconsole.logを見ているので、それは有線のプロパティであることがわかります。どのように状態の配列をループしても、プロパティを元の状態に戻すことはできません。ここに私のコードです。

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()} /> 
     } 
    ) 
    } 
} 

助けてください！なぜ、気の利いた状態が戻ってこないのですか？

Answer 1

いくつかの問題があります... .mapは新しい配列を返しますが、既存の状態は変更されません。変更を確認するには、変数に変数を割り当てる必要があります。

はまた、あなたは.mapで値を返す、または{対"implicit" return({を使用する必要があります。

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

あなたもあり

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 
 
     }]} 
 
    ]} 
 
    }