javascript - setState不适用于数组reactjs

我有组件收件箱并且其中有复选框...但是它可以在第三次点击时起作用...在第一次和第二次点击时不起作用... 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)}/>
    )
  }
}

最佳答案

您实际上并没有正确更新状态。设置像

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

不会使用状态更新检查的状态，而是将具有数组索引的键添加到状态，例如

{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


  切勿直接更改this.state，因为之后可能会调用setState()
  替换您所做的突变。将this.state视为
  一成不变的。


Working demo

关于javascript - setState不适用于数组reactjs，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50116580/