React State nicht aktualisiert und auf den ursprünglichen Zustand zurückgesetzt

Question

Ich habe hier ein sehr seltsames Problem. Ich benutze die React-Toggle-Abhängigkeit, um nur die Wahr/Falsch-Werte einiger Eingaben zurückzugeben.

Im Grunde verwende ich die Callback-Funktion der React-Toggle-Eingänge, um die Werte meines Reaktionszustands zu aktualisieren. Aus irgendeinem Grund wird nur die letzte Eingabe aktualisiert, die geändert wurde, und die anderen werden falsch gehen.

Hier ist, wie mein Code aussieht:

RandomComponent.js

<ToggleComponent title="TestA"/> 
<ToggleComponent title="TestB"/> 
<ToggleComponent title="TestC"/> 
<ToggleComponent title="TestD"/> 

ToggleComponent.js

constructor(props){ 
    super(props); 
    this.state={ 
    testA:false, 
    testB:false, 
    testC:false, 
    testD:false, 
    } 
} 
updateCheckValue(title){ 
    if(title === 'TestA'){ 
    this.setState({ 
     testA: !this.state.testA 
    },()=>{ 
     console.log(this.state) 
    }) 
    } 
    if(title === 'TestB'){ 
    this.setState({ 
     testB: !this.state.testB 
    },()=>{ 
     console.log(this.state) 
    }) 
    } 
    if(title === 'TestC'){ 
    this.setState({ 
     testC: !this.state.testC 
    },()=>{ 
     console.log(this.state) 
    }) 
    } 
    if(title === 'TestD'){ 
    this.setState({ 
     testD: !this.state.testD 
    },()=>{ 
     console.log(this.state) 
    }) 
    } 
} 

render(){ 
    return(
    <Row className={styles.container}> 
     <Col sm={1} md={1} lg={1}></Col> 
     <Col sm={2} md={2} lg={2}> 
      <Toggle 
      onChange={this.updateCheckValue.bind(this, this.props.title)} 
      icons={false} /> 
     </Col> 
     <Col sm={8} md={8} lg={8}> 
      <h4>{this.props.title}</h4>   
     </Col> 
     <Col sm={1} md={1} lg={1}></Col>   
    </Row> 
) 
} 

Answer 1

Sie den Ansatz ändern sollte, sollte der Staat sein verwaltet von der RandomComponent.js, ToggleComponent.js sollte bei jedem Aufruf einen Rückruf aufrufen. Das Ergebnis sollte wie folgt sein: RandomComponent.js

constructor(props){ 
    super(props); 
    this.state={ 
    testA:false, 
    testB:false, 
    testC:false, 
    testD:false, 
    } 
} 
updateCheckValue(att){ 
    this.setState({ 
     [att]: !this.state[att] 
    },()=>{ 
     console.log(this.state) 
    }) 
    } 
} 

render(){ 
    <ToggleComponent title="TestA" onToggle={() => this.updateCheckValue("testA")}/> 
    <ToggleComponent title="TestB" onToggle={() => this.updateCheckValue("testB")/> 
    <ToggleComponent title="TestC" onToggle={() => this.updateCheckValue("testC")/> 
    <ToggleComponent title="TestD" onToggle={() => this.updateCheckValue("testD")/> 
} 

ToggleComponent.js

<Row className={styles.container}> 
    <Col sm={1} md={1} lg={1}></Col> 
    <Col sm={2} md={2} lg={2}> 
     <Toggle 
     onChange={this.props.onToggle} 
     icons={false} /> 
    </Col> 
    <Col sm={8} md={8} lg={8}> 
     <h4>{this.props.title}</h4>   
    </Col> 
    <Col sm={1} md={1} lg={1}></Col>   
</Row>