用动态键反应setState

Question

我有以下代码片段：

onChange(e) {
    e.persist
    this.setState((prevState) => {
      prevState[e.target.id] =  e.target.value
      return prevState
    })
  }

我将如何使用上面的代码来设置每个键的状态。

这是初始状态：

 this.state = {
      heading: this.props.match.params.length > 1 ? "Edit Post" : "Create Post",
      title: '',
      category: '',
      body: '',
      author: ''
    }

Answer 1

基本规则是：

我们可以使用 计算属性名称
概念，并使用任何 js表达式 动态计算对象属性名称。为此，我们需要将表达式放在里面[]。

像这样：

var obj = {

   [10 * 20 + 1 - 5]: "Hello"

};



console.log('obj = ', obj);

解：

按照您发布的代码，你需要把e.target.id里面[]，就像这样：

onChange(e) {
    this.setState({
      [e.target.id]: e.target.value
    })
}

或者我们可以先创建该对象，然后将该对象传递给setState函数，如下所示：

onChange(e) {
    let obj = {};
    obj[e.target.id] = e.target.value
    this.setState(obj);
}

另外，您不需要prevState。您可以直接使用新值更新状态变量。prevState仅当新状态值取决于先前状态值时才需要，例如在计数器的情况下。