用动态键反应 setState

Posted 2023-02-23

【中文标题】用动态键反应 setState

【英文标题】：react setState with dynamic key

【发布时间】：2018-03-28 00:42:53

【问题描述】：

我有以下sn-p的代码：

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: ''
    

【问题讨论】：

那么问题是什么？ onChange 中的代码会将动态状态键设置为事件元素的 id。你不需要坚持这个事件 - 只需执行 const target: value, id = e 然后只需使用 id 和 value

Reactjs setState() with a dynamic key name?的可能重复

【参考方案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 仅当新状态值依赖于先前状态值时才需要，例如计数器。

【讨论】：

我之前尝试过，但我收到此错误TypeError: Cannot read property 'setState' of undefined

那意味着你忘了绑定onChange方法，把这一行放在构造函数中：this.onChange = this.onChange.bind(this) :)