Javascript 设置状态为'的计算样式；行不通

我有嵌套的表单对象，但我尝试使用一个处理程序来设置状态，但不知何故无法工作

  constructor() {
    super()

    this.state = {
      form: {
        name: '',
        location: ''
      }
    }
  }

  handleFormInput = (event) => {

    this.setState({
      [this.state.form[event.target.name]]: event.target.value
    })

    setTimeout(() => {
      console.log(this.state.form)
    },50)

  }

---

event.target.name

可以是名称和位置

我认为此代码工作不正常：

这是我的国家({ [this.state.form[event.target.name]]：event.target.value })

备选方案是：

handleFormInput = (event) => {
    //New code
    let obj = {}
    obj[this.state.form[event.target.name]] = event.target.value

    this.setState(obj,() => { console.log(this.state.form) })
  }

---

要查看更新的

状态

，请使用

this.setState的回调函数param
您不能直接访问和修改
setState
函数中的动态状态，您需要获取状态对象的副本并对其进行修改。另外，您可能已经知道，
setState
是
async
，因此您有一个
setTimeout
函数，这是不必要的，因为
setState
为您提供了一个
回调
函数，该函数在状态发生变化时执行

handleFormInput = (event) => {
    var form = {...this.state.form}
    form[event.target.name] = event.target.value;
    this.setState({
      form
    }, () => {this.state.form})

  }

setState是异步的，调用后您的状态将以某种方式正确更新。然后将再次调用render。尝试在render或componentWillUpdate中检查新状态：

您不应该在更改状态后立即查看状态的更改
请澄清您的代码，因为在
构造函数（）
旁边，
handleFormInput=…
是无效语法，如果它是
handleforimput:event=>…
我会说check
这个
箭头函数没有自己的
这个
-对象，它们包围了周围的对象。或者
handleFormInput=event=>…
的确切定义在哪里？上下文在这里很重要。@Thomas为什么不呢？这是es6。handleFormInput是我的jsx中onChange的侦听器。这是我所指上下文的一部分。那么
handleFormInput=…
是否在
render（）函数中？通过你的代码片段告诉你它看起来像是
handleforimput
是在你的类上定义的一个方法，就在
构造函数的旁边。