javascript - setState不适用于数组reactjs

Question

我有组件 Inbox 并且里面有复选框...但是它在第三次点击时有效...在第一次和第二次点击时无效...setState 工作完美但它没有在 setState

之后重新渲染

class Inbox extends PureComponent {
  constructor(props){
    this.state = {
      checked: [true]
    }
  }

  updateCheck(i, convId) {
    const state = this.state.checked
    state[i] = !state[i]
    this.setState(state)
  }

  render() {
    return (
       <input type="checkbox" checked={this.state.checked[i]} onClick={() => this.updateCheck(i, conv._id)}/>
    )
  }
}

Answer 1

您并没有真正正确地更新状态。设置状态如

this.setState(state, () => {
  console.log(this.state, '787878787878778787')
})

不使用 state 更新选中状态，而是将带有数组索引的键添加到 state 中

{0: true, 1: false, conversationId: '', checked: [true, false]};

您自己使用

改变检查状态

state[i] = !state[i]

要正确更新状态，您可以这样写

updateCheck(i, convId) {
    const checked = [...this.state.checked]
    checked[i] = !checked[i]
    this.setState({ checked }, () => {
      console.log(this.state, '787878787878778787')
    })
 }

您的方法出现问题是因为您直接改变了原始状态，随后的 setState 调用可能会替换原始更改，因此您会看到该行为。

根据 documentation

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

Working demo