blocks|key|234632|text|我认为setState()不做递归合并。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|234633|您可以使用当前状态this.state.selected的值来构造一个新状态，然后对其调用setState()：|234634|var+newSelected+=+_.extend({},+this.state.selected);
newSelected.name+=+'Barfoo';
this.setState({+selected:+newSelected+});|code-block|syntax|javascript|234635|我在这里使用了function+_.extend()+function+(来自underscore.js库)，通过创建状态的浅层副本来防止对状态的现有selected部分进行修改。|234636|另一种解决方案是编写setStateRecursively()，它在新的状态上执行递归合并，然后用它调用replaceState()：|234637|setStateRecursively:+function(stateUpdate,+callback)+{
++var+newState+=+mergeStateRecursively(this.state,+stateUpdate);
++this.replaceState(newState,+callback);
}|234638|entityMap^0|3|A|0|9|J|19|A|0|0|G|A|23|8|0|A|L|1G|E|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1D|8|@]|D|@]|E|$K|L]]|$1|S|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|T|$]]

I think <code>setState()</code> doesn't do recursive merge.

You can use the value of the current state <code>this.state.selected</code> to construct a new state and then call <code>setState()</code> on that:

<pre><code>var newSelected = _.extend({}, this.state.selected);
newSelected.name = 'Barfoo';
this.setState({ selected: newSelected });
</code></pre>

I've used function <code>_.extend()</code> function (from underscore.js library) here to prevent modification to the existing <code>selected</code> part of the state by creating a shallow copy of it.

Another solution would be to write <code>setStateRecursively()</code> which does recursive merge on a new state and then calls <code>replaceState()</code> with it:

<pre><code>setStateRecursively: function(stateUpdate, callback) {
 var newState = mergeStateRecursively(this.state, stateUpdate);
 this.replaceState(newState, callback);
}
</code></pre>

blocks|key|234684|text|你设置初始状态了吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|234685|我将使用我自己的一些代码，例如：|234686|++++getInitialState:+function+()+{
++++++++return+{
++++++++++++dragPosition:+{
++++++++++++++++top++:+0,
++++++++++++++++left+:+0
++++++++++++},
++++++++++++editValue+:+"",
++++++++++++dragging++:+false,
++++++++++++editing+++:+false
++++++++};
++++}|code-block|syntax|javascript|234687|在我正在开发的一个应用程序中，这就是我设置和使用状态的方式。我相信在setState上，你可以单独编辑你想要的任何状态，我一直这样称呼它：|offset|length|style|CODE|234688|++++onChange:+function+(event)+{
++++++++event.preventDefault();
++++++++event.stopPropagation();
++++++++this.setState({editValue:+event.target.value});
++++},|234689|请记住，您必须在调用getInitialState的React.createClass函数中设置状态|234690|entityMap^0|0|0|0|Y|8|0|0|A|F|Q|H|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@$K|12|L|13|M|N]|$K|14|L|15|M|N]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|T|$]]

have you set the initial state? 

I'll use some of my own code for example:

<pre><code> getInitialState: function () {
 return {
 dragPosition: {
 top : 0,
 left : 0
 },
 editValue : "",
 dragging : false,
 editing : false
 };
 }
</code></pre>

In an app I'm working on, this is how I've been setting and using state. I believe on <code>setState</code> you can then just edit whatever states you want individually I've been calling it like so: 

<pre><code> onChange: function (event) {
 event.preventDefault();
 event.stopPropagation();
 this.setState({editValue: event.target.value});
 },
</code></pre>

Keep in mind you have to set the state within the <code>React.createClass</code> function that you called <code>getInitialState</code>

blocks|key|234713|text|React.addons中最近添加了不变性帮助器，因此，您现在可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|234714|var+newState+=+React.addons.update(this.state,+{
++selected:+{
++++name:+{+$set:+'Barfoo'+}
++}
});
this.setState(newState);|code-block|syntax|javascript|234715|Immutability+helpers+documentation。|offset|length|234716|entityMap|0|LINK|mutability|MUTABLE|url|http://facebook.github.io/react/docs/update.html^0|0|0|0|Y|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Immutability helpers were recently added to React.addons, so with that, you can now do something like:

<pre><code>var newState = React.addons.update(this.state, {
 selected: {
 name: { $set: 'Barfoo' }
 }
});
this.setState(newState);
</code></pre>

<a href="http://facebook.github.io/react/docs/update.html" rel="nofollow noreferrer">Immutability helpers documentation</a>.

blocks|key|234725|text|我使用tmp+var进行更改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|234726|changeTheme(v)+{
++++let+tmp+=+this.state.tableData
++++tmp.theme+=+v
++++this.setState({
++++++++tableData+:+tmp
++++})
}|code-block|syntax|javascript|234727|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|$]]

I use the tmp var to change.

<pre><code>changeTheme(v) {
 let tmp = this.state.tableData
 tmp.theme = v
 this.setState({
 tableData : tmp
 })
}
</code></pre>

blocks|key|18358|text|我使用的是es6类，我最终在顶部状态上有了几个复杂的对象，并试图使我的主要组件更加模块化，所以我创建了一个简单的类包装器来保持顶部组件上的状态，但允许更多的本地逻辑。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|18359|包装器类接受一个函数作为其构造函数，该构造函数设置主组件状态的属性。|18360|export+default+class+StateWrapper+{

++++constructor(setState,+initialProps+=+[])+{
++++++++this.setState+=+props+=>+{
++++++++++++this.state+=+{...this.state,+...props}
++++++++++++setState(this.state)
++++++++}
++++++++this.props+=+initialProps
++++}

++++render()+{
++++++++return(<div>render()+not+defined</div>)
++++}

++++component+=+props+=>+{
++++++++this.props+=+{...this.props,+...props}
++++++++return+this.render()
++++}
}|code-block|syntax|javascript|18361|然后，对于顶部状态上的每个复杂属性，我创建一个StateWrapped类。你可以在这里设置构造函数中的默认属性，它们将在类初始化时设置，你可以引用值的本地状态并设置本地状态，引用本地函数，并让它在链中向上传递：|18362|class+WrappedFoo+extends+StateWrapper+{

++++constructor(...props)+{+
++++++++super(...props)
++++++++this.state+=+{foo:+"bar"}
++++}

++++render+=+()+=>+<div+onClick={this.props.onClick%7C%7Cthis.onClick}>{this.state.foo}</div>

++++onClick+=+()+=>+this.setState({foo:+"baz"})


}|18363|因此，我的顶层组件只需要构造函数将每个类设置为它的顶层state属性，一个简单的呈现，以及任何跨组件通信的函数。|18364|class+TopComponent+extends+React.Component+{

++++constructor(...props)+{
++++++++super(...props)

++++++++this.foo+=+new+WrappedFoo(
++++++++++++props+=>+this.setState({
++++++++++++++++fooProps:+props
++++++++++++})+
++++++++)

++++++++this.foo2+=+new+WrappedFoo(
++++++++++++props+=>+this.setState({
++++++++++++++++foo2Props:+props
++++++++++++})+
++++++++)

++++++++this.state+=+{
++++++++++++fooProps:+this.foo.state,
++++++++++++foo2Props:+this.foo.state,
++++++++}

++++}

++++render()+{
++++++++return(
++++++++++++<div>
++++++++++++++++<this.foo.component+onClick={this.onClickFoo}+/>
++++++++++++++++<this.foo2.component+/>
++++++++++++</div>
++++++++)
++++}

++++onClickFoo+=+()+=>+this.foo2.setState({foo:+"foo+changed+foo2!"})
}|18365|对于我的目的，似乎工作得很好，请记住，尽管您不能更改分配给顶级组件的包装组件的属性的状态，因为每个包装组件都在跟踪自己的状态，但每次更改时都会更新顶级组件上的状态。|18366|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I am using es6 classes, and I ended up with several complex objects on my top state and was trying to make my main component more modular, so i created a simple class wrapper to keep the state on the top component but allow for more local logic.

The wrapper class takes a function as its constructor that sets a property on the main component state.

<pre><code>export default class StateWrapper {

 constructor(setState, initialProps = []) {
 this.setState = props =&gt; {
 this.state = {...this.state, ...props}
 setState(this.state)
 }
 this.props = initialProps
 }

 render() {
 return(&lt;div&gt;render() not defined&lt;/div&gt;)
 }

 component = props =&gt; {
 this.props = {...this.props, ...props}
 return this.render()
 }
}
</code></pre>

Then for each complex property on the top state, i create one StateWrapped class. You can set the default props in the constructor here and they will be set when the class is initialised, you can refer to the local state for values and set the local state, refer to local functions, and have it passed up the chain:

<pre><code>class WrappedFoo extends StateWrapper {

 constructor(...props) { 
 super(...props)
 this.state = {foo: "bar"}
 }

 render = () =&gt; &lt;div onClick={this.props.onClick||this.onClick}&gt;{this.state.foo}&lt;/div&gt;

 onClick = () =&gt; this.setState({foo: "baz"})


}
</code></pre>

So then my top level component just needs the constructor to set each class to it's top level state property, a simple render, and any functions that communicate cross-component.

<pre><code>class TopComponent extends React.Component {

 constructor(...props) {
 super(...props)

 this.foo = new WrappedFoo(
 props =&gt; this.setState({
 fooProps: props
 }) 
 )

 this.foo2 = new WrappedFoo(
 props =&gt; this.setState({
 foo2Props: props
 }) 
 )

 this.state = {
 fooProps: this.foo.state,
 foo2Props: this.foo.state,
 }

 }

 render() {
 return(
 &lt;div&gt;
 &lt;this.foo.component onClick={this.onClickFoo} /&gt;
 &lt;this.foo2.component /&gt;
 &lt;/div&gt;
 )
 }

 onClickFoo = () =&gt; this.foo2.setState({foo: "foo changed foo2!"})
}
</code></pre>

Seems to work quite well for my purposes, bear in mind though you can't change the state of the properties you assign to wrapped components at the top level component as each wrapped component is tracking its own state but updating the state on the top component each time it changes.

blocks|key|234864|text|React状态不会在setState中执行递归合并，同时期望不会有就地的状态成员更新。您要么必须自己复制封闭的对象/数组(使用array.slice或Object.assign)，要么使用专用库。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|234865|就像这张。NestedLink直接支持复合React状态的处理。|234866|this.linkAt(+'selected'+).at(+'name'+).set(+'Barfoo'+);|code-block|syntax|javascript|234867|此外，到selected或selected.name的链接可以作为单个属性传递到任何地方，并使用set进行修改。|234868|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/Volicon/NestedLink^0|A|8|0|5|A|0|0|0|4|8|D|D|1C|3|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

React state doesn't perform the recursive merge in <code>setState</code> while expects that there won't be in-place state member updates at the same time. You either have to copy enclosed objects/arrays yourself (with array.slice or Object.assign) or use the dedicated library.

Like this one. <a href="https://github.com/Volicon/NestedLink" rel="nofollow noreferrer">NestedLink</a> directly supports handling of the compound React state.

<pre><code>this.linkAt( 'selected' ).at( 'name' ).set( 'Barfoo' );
</code></pre>

Also, the link to the <code>selected</code> or <code>selected.name</code> can be passed everywhere as a single prop and modified there with <code>set</code>.

blocks|key|234905|text|我不想安装另一个库，所以这里有另一个解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|234906|而不是：|234907|this.setState({+selected:+{+name:+'Barfoo'+}});|code-block|syntax|javascript|234908|改为执行以下操作：|234909|var+newSelected+=+Object.assign({},+this.state.selected);
newSelected.name+=+'Barfoo';
this.setState({+selected:+newSelected+});|234910|或者，感谢评论中的@icc97，甚至更简洁，但可读性较差：|234911|this.setState({+selected:+Object.assign({},+this.state.selected,+{+name:+"Barfoo"+})+});|234912|另外，要明确的是，这个答案并没有违反@bgannonpl上面提到的任何问题。|234913|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I didn't want to install another library so here's yet another solution. 

Instead of:

<pre><code>this.setState({ selected: { name: 'Barfoo' }});
</code></pre>

Do this instead:

<pre><code>var newSelected = Object.assign({}, this.state.selected);
newSelected.name = 'Barfoo';
this.setState({ selected: newSelected });
</code></pre>

Or, thanks to @icc97 in the comments, even more succinctly but arguably less readable:

<pre><code>this.setState({ selected: Object.assign({}, this.state.selected, { name: "Barfoo" }) });
</code></pre>

Also, to be clear, this answer doesn't violate any of the concerns that @bgannonpl mentioned above.

blocks|key|18463|text|ES6解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|18464|我们初始设置状态|18465|this.setState({+selected:+{+id:+1,+name:+'Foobar'+}+});+
//this.state:+{+selected:+{+id:+1,+name:+'Foobar'+}+}|code-block|syntax|javascript|18466|我们正在更改状态对象的某个级别上的属性：|18467|const+{+selected:+_selected+}+=+this.state
const++selected+=+{+..._selected,+name:+'Barfoo'+}
this.setState({selected})
//this.state:+{+selected:+{+id:+1,+name:+'Barfoo'+}+}|18468|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<h3>ES6 solution</h3>
We set the state initially
<pre><code>this.setState({ selected: { id: 1, name: 'Foobar' } }); 
//this.state: { selected: { id: 1, name: 'Foobar' } }
</code></pre>
We are changeing a property on some level of the state object:
<pre><code>const { selected: _selected } = this.state
const selected = { ..._selected, name: 'Barfoo' }
this.setState({selected})
//this.state: { selected: { id: 1, name: 'Barfoo' } }
</code></pre>

I have the following state:
<pre><code>this.setState({ selected: { id: 1, name: 'Foobar' } }); 
</code></pre>
Then I update the state:
<pre><code>this.setState({ selected: { name: 'Barfoo' }});
</code></pre>
Since <code>setState</code> is suppose to merge I would expect it to be:
<pre><code>{ selected: { id: 1, name: 'Barfoo' } }; 
</code></pre>
But instead it eats the id and the state is:
<pre><code>{ selected: { name: 'Barfoo' } }; 
</code></pre>
Is this expected behavior and what's the solution to update only one property of a nested state object?

this.setState isn't merging states as I would expect

我有以下状态：this.setState({ selected: { id: 1, name: 'Foobar' } });  然后我更新状态：this.setState({ selected: { name: 'Barfoo' }});由于setState是要合并的，所以我希望它是：{ selected: { id:...

问this.setState没有像我预期的那样合并状态
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问this.setState没有像我预期的那样合并状态EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问this.setState没有像我预期的那样合并状态
EN