Question

因此，我有一个具有onchange方法的复选框，但是在该方法中，我无法更改该值。

此外，接收到的值与状态变量中的键相同。

以下代码：

constructor(props){
    super(props)
    this.state={pins:[],filter:{Irrigation:true,Patvan:true,Drinking:true,Minigrid:true,Rooftop:true}}
    this.handleFilterChange=this.handleFilterChange.bind(this)
}

handleFilterChange(filtervalue){
    console.log(filtervalue) //lets assume value to be Drinking
    console.log(this.state.filter[filtervalue]) // it says true
    this.setState({filter[filtervalue]:!this.state.filter[filtervalue]}) //here the error occurs
}

我知道我在做一些语法错误。帮助指出来。谢谢

Answer 1

您不能使用filter[filtervalue]作为属性键来更新状态，您应该执行以下操作：

this.setState(
  prevState => ({
    ...prevState,
    filter: {
      ...prevState.filter,
      [filtervalue]: !prevState.filter[filtervalue]
    }
  })
)

首先，如果在状态更新期间需要访问先前的状态，则应使用tecnique方法，而不是对象one。

然后，如您所见，更新状态的内部属性可能会有些麻烦，我的建议是使用类似immer的东西。

Answer 2

首先，当您的状态更改取决于当前状态时，请使用updater的{{1}}方法。之后，由于您要更新嵌套对象，因此需要重新创建嵌套，直到需要更新的属性为止。

对于您来说，传递给setState的对象应该是

setState

因此，您实际的{ filter: { Irrigation: true, Patvan: true, Drinking: false, // this is what changed Minigrid: true, Rooftop: true } }通话应该是

setState

无法更新状态变量的特定键

2 个答案: