Reactjs 无状态组件中的“反应”复选框未立即更新

我使用复选框创建了一个基本的界面，该复选框使用了一种react设计模式，这种模式以前对我很有用，而且我认为效果很好——即提升状态并将道具传递给UI组件。我的复选框组件被传递一个值、一个度量、一个状态更改方法和一个用于选中的布尔值。问题是复选框不会立即更新，即使您可以在React dev工具中看到它们正在更新。它们仅在下一次单击时更新，如选中另一个复选框时。代码如下：

class App extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   metricsSelected: []
  }
  this.selectMetric = this.selectMetric.bind(this)
 }

selectMetric(metric) {
 const metricsSelected = this.state.metricsSelected
 const index = metricsSelected.indexOf(metric)
 if (index !== -1){
  metricsSelected.splice(index, 1)
 }
 else {
  metricsSelected.push(metric)
 }
 this.setState({
  metricsSelected,
 });
}

render() {
 return (
  <div>
    <Sidebar
      metricsSelected={this.state.metricsSelected}
      selectMetric={this.selectMetric}/>
    <SomethingElse/>
   </div>
  )
 }
}

const SomethingElse = () => (<div><h2>Something Else </h2></div>)

const Sidebar = ({ metricsSelected, selectMetric }) => {
 const metrics = ['first thing', 'second thing', 'third thing']
 return (
  <div>
   <h3>Select Metrics</h3>
   { metrics.map( (metric, i) =>
    <Checkbox
      key={i}
      metric={metric}
      selectMetric={selectMetric}
      checked={metricsSelected.includes(metric)}/>
    )}
   </div>
  )
 }

const Checkbox = ({ metric, selectMetric, checked }) => {

const onChange = e => {
 e.preventDefault()
 selectMetric(e.target.value)
}
return (
  <ul>
   <li>{metric}</li>
   <li><input
   type='checkbox'
   value={metric}
   checked={checked}
   onChange={onChange} /></li>
  </ul>
 )
}

我已经阅读了几乎所有关于react复选框的资料，大多数复选框的应用程序都与我想做的不同。我已经尝试将状态添加到Checkbox组件，但这似乎没有帮助，因为选中的值仍然需要从其他地方输入。我想当道具换了以后，我们会重新招标的。有什么好处

---

这是一个代码笔：

这是一个工作版本：

导致问题的两个原因是您在selectMetric中改变了状态，并且您的复选框输入的onChange函数使用了e.target.value而不是e.target.checked

---

我将metricsSelected状态更改为一个对象，因为我认为这使它的管理变得更加简单。

做了一些更改，请选中此项。它将非常快：。主要问题是e。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      metricsSelected: {}
    }
    this.selectMetric = this.selectMetric.bind(this)
  }

  selectMetric(metric) {
    this.setState(({ metricsSelected }) => ({
      metricsSelected: {
        ...metricsSelected,
        [metric]: !metricsSelected[metric]
      }
    }))
  }

  render() {
    return (
      <div>
        <Sidebar
          metricsSelected={this.state.metricsSelected}
          selectMetric={this.selectMetric}/>
        <SomethingElse/>
      </div>
    )
  }
}

const SomethingElse = () => (<div><h2>Something Else </h2></div>)

const Sidebar = ({ metricsSelected, selectMetric }) => {
  const metrics = ['first thing', 'second thing', 'third thing']
  return (
    <div>
      <h3>Select Metrics</h3>
      { metrics.map( (metric, i) =>
        <Checkbox
          key={i}
          metric={metric}
          selectMetric={selectMetric}
          checked={Boolean(metricsSelected[metric])}/>
        )}
    </div>
  )
}

const Checkbox = ({ metric, selectMetric, checked }) => {
  return (
  <ul>
    <li>{metric}</li>
    <li>
      <input
        type='checkbox'
        name={metric}
        checked={checked}
        onChange={() => selectMetric(metric)} 
       />
     </li>
   </ul>
  )
}


ReactDOM.render(
  <App />,
  document.getElementById('root')
);