Question

我的州看起来像这样

state = {
  basic: {
    entry: 'index.js',
    output: {
      path: 'dist',
      filename: 'bundle.js',
    }
  }
}

我已经为输入onChange事件定义了一个回调：

handleUpdateString = (e) => {
  const name = e.target.name
  const value = e.target.value
  this.setState({ [name]: value })
  console.log(this.state)
}

说我的输入名称是＆＃39; basic.entry＆＃39;

我的状态已更新，但this.state.basic不是{ entry: 'some value'}

我最终在我的状态中使用了一个新密钥：{ basic.entry: 'some value' }

我尝试使用dot-object将点分隔的字符串转换为嵌套对象，然后将其传递给setState，但状态似乎没有变化。

这个问题的简单解决方案是什么？

Answer 1

使用带有显式setState的switch语句。

Answer 2

这不是一个React问题，而是一个纯JavaScript问题，关于如何使用带点的字符串为该属性在任何对象上设置嵌套属性。这里有一个答案：Javascript object key value coding. Dynamically setting a nested value

在React中使用该示例：

handleUpdateString = (e) => {
  const name = e.target.name
  const value = e.target.value
  const state = Object.assign({}, this.state);
  setData(name, value, state);
  this.setState(state);
  console.log(this.state)
}

如何调用setState以对嵌套对象和未知密钥

2 个答案: