React State未更新并重置为原始状态

Question

我在这里遇到一个非常奇怪的问题.我正在使用react-toggle依赖项来返回某些输入的true/false值.

基本上我正在做的是我正在使用react-toggle输入的回调函数来更新我的反应状态的值.由于某种原因,它只会更新已更改的最后一个输入,其他输入将变为false.

以下是我的代码的外观:

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

你应该在这里改变方法,状态应该由RandomComponent.js管理,ToggleComponent.js应该在每次调用时调用一个回调.结果应该是这样的: 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>