ReactJs：如何处理具有属性的状态对象

IT技术 reactjs
2021-05-11 15:03:25

我正在玩 ReactJs，我想知道是否可以使用具有属性的状态对象。现在我在下面做了一个伪代码示例，它有一个简单的对象，但我想处理我有很多具有自己属性的对象的情况。

例如，我想处理以下情况：

//Initialize object
getInitialState: function() {
    return {
        myObject: {
            prop1: "",
            prop2: ""
        }
    };
}

//How I would assign to a property of that object
setProp1: function(event) {
    this.setState({myObject.prop1: event.target.value});
},

//Rendering the item (jsx)
<div>
    <div className="custom">{myObject.prop1}</div>
    <span>{myObject.prop2}<span>
</div>

像上面的例子那样可能吗？还是我需要将每个属性直接附加到状态？在 Reactjs 中处理这样的场景的最佳方法是什么？

1个回答

最好的办法是创建一个更改了指定属性的新对象。您可以Object.assign使用以下方法（如有必要，使用垫片或库）：

var newMyObj = Object.assign({}, this.state.myObject, {
  prop1: event.target.value
});
this.setState({myObject: newMyObj});

您还可以使用React 不变性助手来帮助更新嵌套结构：

var newMyObj = update(this.state.myObject, { prop1: { $set: event.target.value } });
this.setState({myObject: newMyObj});

如果您使用 Babel、JSX 或支持ES7 其余/扩展属性操作的东西，您可以稍微简化代码（这是我最喜欢的选项，因为我认为它读起来更好）：

var newMyObj = {
  ...this.state.myObject,
  prop1: event.target.value
};
this.setState({myObject: newMyObj});

您经常会看到简单地更新现有对象并重新设置状态的示例，但不建议这样做：

// antipattern!
this.state.myObject.prop1 = event.target.value;
this.setState({myObject: this.state.myObject});
其它你可能感兴趣的问题
上一篇在 ASP.NET Core MVC 中显示 React 应用程序的方法 下一篇使用 Gatsby 从富文本组件中将 Markdown 转换为 HTML