Question

我有组件收件箱并且里面有复选框...但它适用于第三次点击...不适用于第一次和第二次点击... 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')
})

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

{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()可能替换你所做的突变。把它当作状态对待不可变的。

<强> Working demo

setState不适用于数组reactjs

1 个答案: