Question

我有一个对象，在登录时会打印以下内容：

对象{ “空调”：错误， “阁楼”：错误， “地下室”：假， “浴室”：错误， “卧室/起居区”：否， “抓取空间”：false， }

我想使用上面的setState方法。我尝试了以下操作：

componentDidMount() {
  this.setAreaNamesInState(this.props.areas)
}

setAreaNamesInState(areaNames) {
  let areaNamesList = {}

  for (let area of areaNames) {
    areaNamesList[area] = false
  }

  console.log('areaNamesList', areaNamesList)
  this.setState(areaNamesList)
  console.log('Attic', this.state['Attic'])
}

它似乎不起作用，因为当我在上面登录Attic时，它返回未定义状态。

Answer 1

其他用户的答案是正确的，您可以执行以下操作

this.setState({ areas: areaNamesList }, () => {
  console.log('Attic', this.state.areas['Attic'])
})

区别在于，您试图用新创建的对象设置整个状态对象，这是一种不好的做法，而此答案将使用所提供的数据来更新状态对象内部称为Area的属性。

使用属性区域更新状态后，控制台日志将同步执行，并记录false

作为旁注，如果第一次创建和渲染组件时未提供prop，则也许使用componentDidMount是个坏主意，因为它只是第一次执行，而不再执行，因此该属性可能是根据需要的时间未定义。

考虑切换到其他生命周期方法。

Answer 2

由于to_dict是对象，因此import pandas as pd df = pd.read_csv(your_csv) # Do your data cleaning here. # To create a dictionary as_dict = df.to_dict(orient='list') # To write back to a csv after some manipulations df.to_csv(filename)中缺少花括号。

setState

还值得一提的是，this.state可能无法在this.setState({ areaNamesList })之前完成。 setState可以接受这样的回调，该回调将在完成时执行：

console.log('Attic', this.state.areaNamesList['Attic'])

Answer 3

尝试

this.setState({ areaNamesList }, () => {
  console.log('Attic', this.state.areaNamesList['Attic'])
})

使用对象反应本机setState

3 个答案: