反应的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

基本规则是：

我们可以用Computed property names概念和使用任何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，例如在计数器的情况下。