blocks|key|4761308|text|setState执行浅合并。如果metaData是平面的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4761309|this.setState({
++metaData:+Object.assign({},+this.state.metaData,+newMetaData),
});|code-block|syntax|javascript|4761310|或者如果使用扩散：|4761311|this.setState({
++metaData:+{+...this.state.metaData,+...newMetaData+},
});|4761312|entityMap|0|LINK|mutability|MUTABLE|url|https://facebook.github.io/react/docs/react-component.html#setstate^0|0|8|0|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<a href="https://facebook.github.io/react/docs/react-component.html#setstate" rel="noreferrer"><code>setState</code></a> performs a shallow merge. If metaData is is flat:

<pre><code>this.setState({
 metaData: Object.assign({}, this.state.metaData, newMetaData),
});
</code></pre>

or if using spread :

<pre><code>this.setState({
 metaData: { ...this.state.metaData, ...newMetaData },
});
</code></pre>

blocks|key|162134|text|如果您只需要更新一个属性，那么另一种方法是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162135|this.setState({
++metaData:+{
++++...this.state.metaData,
++++age:+20
++}
})|code-block|syntax|javascript|162136|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Another way to approach this, if you only need to update one property, would be like this:
<pre><code>this.setState({
 metaData: {
 ...this.state.metaData,
 age: 20
 }
})
</code></pre>

blocks|key|3080513|text|setState也可以接受一个函数，该函数接收状态参数，您可以使用送交合并来进行深度合并。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3080514|++setState(state+=>+merge(state,+yourPartialObjectToBeDeepMerged));|code-block|syntax|javascript|3080515|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

setState can also take a function, which receives an argument of state, and you can use lodash merge to do the deep merge.
<pre><code> setState(state =&gt; merge(state, yourPartialObjectToBeDeepMerged));
</code></pre>

blocks|key|4761395|text|一个棘手的解决方案在这里|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4761396|const+[complexObject,+setComplexObject]+=+useState({a:{b:{c:1}}})
setComplexObject((s)=>{
++s.a.b.c+=+2
++return+{...s}
})|code-block|syntax|javascript|4761397|它怎麽工作?|4761398|对象是引用。如果您使用s.a.b.c+=+2，这将更新状态，但组件不会重命名，因此不会更改。|offset|length|style|CODE|4761399|然后，我们需要一种方法来重新修改组件。如果您使用setComplexObject(s=>s)，它将不会触发重命名器，因为尽管ComplexObject的内部确实发生了变化，但是引用仍然指向同一个对象。|4761400|因此，我们需要ES6扩展操作符通过这个{...s}来重建一个对象。|4761401|entityMap^0|0|0|0|B|B|0|O|M|0|J|6|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@$K|11|L|12|M|N]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|13|8|@$K|14|L|15|M|N]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|T|$]]

a tricky solution is here
<pre class="lang-js prettyprint-override"><code>const [complexObject, setComplexObject] = useState({a:{b:{c:1}}})
setComplexObject((s)=&gt;{
 s.a.b.c = 2
 return {...s}
})
</code></pre>
How does it work?
An object is a reference. If you <code>s.a.b.c = 2</code>, this will update the state, but the component doesn't rerender, so the dom will not change.
Then we need a way to rerender the component. If you <code>setComplexObject(s=&gt;s)</code>, it will not trigger rerender, because albeit the interior of the ComplexObject do change, the reference still point at the same object.
So we need ES6 spread operator to reconstruct a object by doing this <code>{...s}</code>

When I have the following initial state declared:

<pre><code> getInitialState: function() {
 return {
 isValid: false,
 metaData: {
 age: 12,
 content_type: 'short_url'
 }
 };
 },
</code></pre>

and I update state with <code>setState</code> like this:

<pre><code>...
let newMetaData = { age: 20 };
...
this.setState({
 isValid: true,
 metaData: newMetaData
 });
...
</code></pre>

Resulting <code>this.state.metadata</code> object has only age defined. But as far as I'm aware, <code>this.setState()</code> merges it argument to existing state. Why it's not working here, isn't this supposed to be recurrent merging?

Is there a way to merge new object properties to state object property in React/ES6?

Deep merge of complex state in React

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

当我声明了以下初始状态时：  getInitialState: function() {    return {      isValid: false,      metaData: {        age: 12,        content_type: 'short_url'      }    };  },...

问反应中复杂状态的深度融合
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应中复杂状态的深度融合EN