2017-11-27 1 views
0

Ich habe hier ein sehr seltsames Problem. Ich benutze die React-Toggle-Abhängigkeit, um nur die Wahr/Falsch-Werte einiger Eingaben zurückzugeben.React State nicht aktualisiert und auf den ursprünglichen Zustand zurückgesetzt

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> 
) 
} 
+0

Ist setState auf dem übergeordneten aufgerufen wird? Wenn dies der Fall ist, wird eine neue Instanz der Komponente erstellt, die möglicherweise Ihr Problem verursacht. Sie können dies überprüfen, indem Sie die componentWillMount-Funktion Ihrer Komponente protokollieren, um festzustellen, ob sie während des Rückrufs ausgelöst wird. – Alex

+0

@Alex, setState wird nicht für das übergeordnete Element aufgerufen. – Emmanuel

+0

Ich sehe nicht, dass die Werte auf den Komponenten aus dem Status gesetzt werden ... wie ''. Ist das ein Merkmal der Komponente? Oder das fehlende bisschen Code? – Ted

Antwort

4

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> 
+0

Es hat funktioniert! Kannst du mir bitte erklären, wie es kommt? – Emmanuel

+1

Der Zustand sollte von dem Elternteil verwaltet werden, der alle 4 kennt: testA, testB, testC und testD. TestA weiß nur sich selbst, und kann den Zustand von TestB, C oder D nicht ändern. –

+0

macht es Sinn, danke! – Emmanuel

Verwandte Themen