blocks|key|4570921|text|React可以批量更新，因此正确的方法是为setState提供一个执行更新的函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4570922|对于React更新插件，以下内容将可靠地工作：|4570923|this.setState(+state+=>+update(state,+{array:+{$push:+[4]}})+);|code-block|syntax|javascript|4570924|或者对于concat()：|4570925|this.setState(+state+=>+({
++++array:+state.array.concat([4])
}));|4570926|下面以https://jsbin.com/mofekakuqi/7/edit?js,output为例展示了如果你弄错了会发生什么。|offset|length|4570927|setTimeout()调用正确地添加了三个项目，因为React不会在setTimeout回调中批量更新(参见https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ)。|4570928|有but的onClick只会添加"Third"，但修复的那个会像预期的那样添加F、S和T。|4570929|class+List+extends+React.Component+{
++constructor(props)+{
++++super(props);

++++this.state+=+{
++++++array:+[]
++++}

++++setTimeout(this.addSome,+500);
++}

++addSome+=+()+=>+{
++++++this.setState(
++++++++update(this.state,+{array:+{$push:+["First"]}}));
++++++this.setState(
++++++++update(this.state,+{array:+{$push:+["Second"]}}));
++++++this.setState(
++++++++update(this.state,+{array:+{$push:+["Third"]}}));
++++};

++addSomeFixed+=+()+=>+{
++++++this.setState(+state+=>+
++++++++update(state,+{array:+{$push:+["F"]}}));
++++++this.setState(+state+=>+
++++++++update(state,+{array:+{$push:+["S"]}}));
++++++this.setState(+state+=>+
++++++++update(state,+{array:+{$push:+["T"]}}));
++++};



++render()+{

++++const+list+=+this.state.array.map((item,+i)+=>+{
++++++return+<li+key={i}>{item}</li>
++++});
+++++++console.log(this.state);

++++return+(
++++++<div+className='list'>
++++++++<button+onClick={this.addSome}>add+three</button>
++++++++<button+onClick={this.addSomeFixed}>add+three+(fixed)</button>
++++++++<ul>
++++++++{list}
++++++++</ul>
++++++</div>
++++);
++}
};


ReactDOM.render(<List+/>,+document.getElementById('app'));|4570930|entityMap|0|LINK|mutability|MUTABLE|url|https://jsbin.com/mofekakuqi/7/edit?js,output|1|https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ^0|0|0|0|0|0|3|19|0|0|1J|1S|1|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1B|8|@]|9|@$O|1C|P|1D|1|1E]]|A|$]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@$O|1G|P|1H|1|1I]]|A|$]]|$1|S|3|T|5|6|7|1J|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|1K|8|@]|9|@]|A|$G|H]]|$1|W|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|Z|10|11|A|$12|15]]]]

React may batch updates, and therefore the correct approach is to provide setState with a function that performs the update.

For the React update addon, the following will reliably work:

<pre><code>this.setState( state =&gt; update(state, {array: {$push: [4]}}) );
</code></pre>

or for concat():

<pre><code>this.setState( state =&gt; ({
 array: state.array.concat([4])
}));
</code></pre>

The following shows what <a href="https://jsbin.com/mofekakuqi/7/edit?js,output" rel="noreferrer">https://jsbin.com/mofekakuqi/7/edit?js,output</a> as an example of what happens if you get it wrong.

The setTimeout() invocation correctly adds three items because React will not batch updates within a setTimeout callback (see <a href="https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ" rel="noreferrer">https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ</a>).

The buggy onClick will only add "Third", but the fixed one, will add F, S and T as expected.

<pre><code>class List extends React.Component {
 constructor(props) {
 super(props);

 this.state = {
 array: []
 }

 setTimeout(this.addSome, 500);
 }

 addSome = () =&gt; {
 this.setState(
 update(this.state, {array: {$push: ["First"]}}));
 this.setState(
 update(this.state, {array: {$push: ["Second"]}}));
 this.setState(
 update(this.state, {array: {$push: ["Third"]}}));
 };

 addSomeFixed = () =&gt; {
 this.setState( state =&gt; 
 update(state, {array: {$push: ["F"]}}));
 this.setState( state =&gt; 
 update(state, {array: {$push: ["S"]}}));
 this.setState( state =&gt; 
 update(state, {array: {$push: ["T"]}}));
 };



 render() {

 const list = this.state.array.map((item, i) =&gt; {
 return &lt;li key={i}&gt;{item}&lt;/li&gt;
 });
 console.log(this.state);

 return (
 &lt;div className='list'&gt;
 &lt;button onClick={this.addSome}&gt;add three&lt;/button&gt;
 &lt;button onClick={this.addSomeFixed}&gt;add three (fixed)&lt;/button&gt;
 &lt;ul&gt;
 {list}
 &lt;/ul&gt;
 &lt;/div&gt;
 );
 }
};


ReactDOM.render(&lt;List /&gt;, document.getElementById('app'));
</code></pre>

blocks|key|64576|text|使用ES6的最简单方法|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|64577|this.setState(prevState+=>+({
++++array:+[...prevState.array,+newElement]
}))|code-block|syntax|javascript|64578|entityMap^0|2|3|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

The simplest way with <code>ES6</code>:

<pre><code>this.setState(prevState =&gt; ({
 array: [...prevState.array, newElement]
}))
</code></pre>

blocks|key|4570956|text|这段代码对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4570957|fetch('http://localhost:8080')
++.then(response+=>+response.json())
++.then(json+=>+{
++++this.setState({mystate:+this.state.mystate.push.apply(this.state.mystate,+json)})
++})|code-block|syntax|javascript|4570958|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|$]]

This code work for me:

<pre><code>fetch('http://localhost:8080')
 .then(response =&gt; response.json())
 .then(json =&gt; {
 this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
 })
</code></pre>

blocks|key|4571005|text|我正在尝试在数组状态中推送值，并像这样设置值，并通过map函数定义状态数组和推送值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4571006|+this.state+=+{
++++++++createJob:+[],
++++++++totalAmount:Number=0
++++}


+your_API_JSON_Array.map((_)+=>+{
++++++++++++++++this.setState({totalAmount:this.state.totalAmount+%2B=+_.your_API_JSON.price})
++++++++++++++++this.state.createJob.push({+id:+_._id,+price:+_.your_API_JSON.price+})
++++++++++++++++return+this.setState({createJob:+this.state.createJob})
++++++++++++})|code-block|syntax|javascript|4571007|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 am trying to push value in an array state and set value like this and define state array and push value by map function.

<pre><code> this.state = {
 createJob: [],
 totalAmount:Number=0
 }


 your_API_JSON_Array.map((_) =&gt; {
 this.setState({totalAmount:this.state.totalAmount += _.your_API_JSON.price})
 this.state.createJob.push({ id: _._id, price: _.your_API_JSON.price })
 return this.setState({createJob: this.state.createJob})
 })
</code></pre>

blocks|key|64676|text|对于添加到数组中的新元素，push()应该是答案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|64677|对于移除元素和更新数组状态，下面的代码适用于我。splice(index,+1)无法工作。|64678|const+[arrayState,+setArrayState]+=+React.useState<any[]>([]);
...

//+index+is+the+index+for+the+element+you+want+to+remove
const+newArrayState+=+arrayState.filter((value,+theIndex)+=>+{return+index+!==+theIndex});
setArrayState(newArrayState);|code-block|syntax|javascript|64679|entityMap^0|D|6|0|O|G|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

For added new element into the array, <code>push()</code> should be the answer.

For remove element and update state of array, below code works for me. <code>splice(index, 1)</code> can not work.

<pre><code>const [arrayState, setArrayState] = React.useState&lt;any[]&gt;([]);
...

// index is the index for the element you want to remove
const newArrayState = arrayState.filter((value, theIndex) =&gt; {return index !== theIndex});
setArrayState(newArrayState);
</code></pre>

blocks|key|64714|text|如果您使用的是功能组件，请按如下方式使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|64715|const+[chatHistory,+setChatHistory]+=+useState([]);+//+define+the+state

const+chatHistoryList+=+[...chatHistory,+{'from':'me',+'message':e.target.value}];+//+new+array+need+to+update
setChatHistory(chatHistoryList);+//+update+the+state|code-block|syntax|javascript|64716|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|$]]

If you are using functional component please use this as below.

<pre><code>const [chatHistory, setChatHistory] = useState([]); // define the state

const chatHistoryList = [...chatHistory, {'from':'me', 'message':e.target.value}]; // new array need to update
setChatHistory(chatHistoryList); // update the state
</code></pre>

blocks|key|4571099|text|//------------------code+is+return+in+typescript+

const+updateMyData1+=+(rowIndex:any,+columnId:any,+value:any)+=>+{

++++setItems(old+=>+old.map((row,+index)+=>+{
++++++++if+(index+===+rowIndex)+{
++++++++return+Object.assign(Object.assign({},+old[rowIndex]),+{+[columnId]:+value+});
++++}
++++return+row;
}));|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4571100|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>//------------------code is return in typescript 

const updateMyData1 = (rowIndex:any, columnId:any, value:any) =&gt; {

 setItems(old =&gt; old.map((row, index) =&gt; {
 if (index === rowIndex) {
 return Object.assign(Object.assign({}, old[rowIndex]), { [columnId]: value });
 }
 return row;
}));
</code></pre>

blocks|key|64755|text|这对我在数组中添加数组很有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|64756|this.setState(prevState+=>+({
++++component:+prevState.component.concat(new+Array(['new',+'new']))
}));|code-block|syntax|javascript|64757|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|$]]

This worked for me to add an array within an array

<pre><code>this.setState(prevState =&gt; ({
 component: prevState.component.concat(new Array(['new', 'new']))
}));
</code></pre>

blocks|key|4571189|text|这是一个2020年的Reactjs+Hook示例，我认为它可以帮助其他人。我正在使用它向Reactjs表中添加新行。如果我能改进的地方请告诉我。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4571190|向功能状态组件添加新元素：|4571191|定义状态数据：|4571192|++++const+[data,+setData]+=+useState([
++++++++{+id:+1,+name:+'John',+age:+16+},
++++++++{+id:+2,+name:+'Jane',+age:+22+},
++++++++{+id:+3,+name:+'Josh',+age:+21+}
++++]);|code-block|syntax|javascript|4571193|让按钮触发一个函数来添加新元素|4571194|<Button
++++//+pass+the+current+state+data+to+the+handleAdd+function+so+we+can+append+to+it.
++++onClick={()+=>+handleAdd(data)}>
++++Add+a+row
</Button>|4571195|function+handleAdd(currentData)+{

++++++++//+return+last+data+array+element
++++++++let+lastDataObject+=+currentTableData[currentTableData.length+-+1]

++++++++//+assign+last+elements+ID+to+a+variable.
++++++++let+lastID+=+Object.values(lastDataObject)[0]+

++++++++//+build+a+new+element+with+a+new+ID+based+off+the+last+element+in+the+array
++++++++let+newDataElement+=+{
++++++++++++id:+lastID+%2B+1,
++++++++++++name:+'Jill',
++++++++++++age:+55,
++++++++}

++++++++//+build+a+new+state+object+
++++++++const+newStateData+=+[...currentData,+newDataElement+]

++++++++//+update+the+state
++++++++setData(newStateData);

++++++++//+print+newly+updated+state
++++++++for+(const+element+of+newStateData)+{
++++++++++++console.log('New+Data:+'+%2B+Object.values(element).join(',+'))
++++++++}

}|4571196|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|H|7|Y|8|@]|9|@]|A|$I|J]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Here's a 2020, Reactjs Hook example that I thought could help others. I am using it to add new rows to a Reactjs table. Let me know if I could improve on something.

Adding a new element to a functional state component:

Define the state data:

<pre class="lang-js prettyprint-override"><code> const [data, setData] = useState([
 { id: 1, name: 'John', age: 16 },
 { id: 2, name: 'Jane', age: 22 },
 { id: 3, name: 'Josh', age: 21 }
 ]);
</code></pre>

Have a button trigger a function to add a new element

<pre class="lang-js prettyprint-override"><code>&lt;Button
 // pass the current state data to the handleAdd function so we can append to it.
 onClick={() =&gt; handleAdd(data)}&gt;
 Add a row
&lt;/Button&gt;
</code></pre>

<pre class="lang-js prettyprint-override"><code>function handleAdd(currentData) {

 // return last data array element
 let lastDataObject = currentTableData[currentTableData.length - 1]

 // assign last elements ID to a variable.
 let lastID = Object.values(lastDataObject)[0] 

 // build a new element with a new ID based off the last element in the array
 let newDataElement = {
 id: lastID + 1,
 name: 'Jill',
 age: 55,
 }

 // build a new state object 
 const newStateData = [...currentData, newDataElement ]

 // update the state
 setData(newStateData);

 // print newly updated state
 for (const element of newStateData) {
 console.log('New Data: ' + Object.values(element).join(', '))
 }

}
</code></pre>

blocks|key|64852|text|当我想要修改数组状态的同时保留元素在数组中的位置时，我遇到了类似的问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|64853|这是一个在like和like之间切换的函数：|64854|++++const+liker+=+(index)+=>
++++++++setData((prevState)+=>+{
++++++++++++prevState[index].like+=+!prevState[index].like;
++++++++++++return+[...prevState];
++++++++});|code-block|syntax|javascript|64855|正如我们可以说的那样，该函数获取数组状态中元素的索引，然后继续修改旧状态并重新构建状态树|64856|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I was having a similar issue when I wanted to modify the array state
while retaining the position of the element in the array
This is a function to toggle between like and unlike:
<pre><code> const liker = (index) =&gt;
 setData((prevState) =&gt; {
 prevState[index].like = !prevState[index].like;
 return [...prevState];
 });
</code></pre>
as we can say the function takes the index of the element in the array state, and we go ahead and modify the old state and rebuild the state tree

blocks|key|64901|text|由于不允许直接改变状态，因此不能简单地将项推入数组。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|64902|state+=+{
++++++value:+'',
++++++list:+['a',+'b',+'c'],
++++};

this.setState({
++list:+[...this.state.list,+newelement]
})


//or

++onAddItem+=+()+=>+{
++++//+not+allowed+AND+not+working
++++this.setState(state+=>+{
++++++const+list+=+state.list.push(state.value);
+
++++++return+{
++++++++list,
++++++++value:+'',
++++++};
++++});
++};|code-block|syntax|javascript|64903|know+more|offset|length|64904|entityMap|0|LINK|mutability|MUTABLE|url|https://www.robinwieruch.de/react-state-array-add-update-remove^0|0|0|0|9|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]]]]

Since you are not allowed to mutate the state directly, you cannot simply push an item to an array.
<pre><code>state = {
 value: '',
 list: ['a', 'b', 'c'],
 };

this.setState({
 list: [...this.state.list, newelement]
})


//or

 onAddItem = () =&gt; {
 // not allowed AND not working
 this.setState(state =&gt; {
 const list = state.list.push(state.value);
 
 return {
 list,
 value: '',
 };
 });
 };
</code></pre>
<a href="https://www.robinwieruch.de/react-state-array-add-update-remove" rel="nofollow noreferrer">know more</a>

blocks|key|4571312|text|目前有这么多人面临着更新useState钩子状态的问题。我使用这种方法来安全地更新它，并想在这里分享它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4571313|这是我的州|4571314|const+[state,+setState]+=+useState([])|code-block|syntax|javascript|4571315|假设我有一个名为obj1的对象，并希望将其附加到我的状态中。我建议这样做。|offset|length|style|CODE|4571316|setState(prevState+=>+[...prevState,+obj1])|4571317|这将安全地将对象插入到结尾处，并保持状态一致性|4571318|entityMap^0|0|0|0|8|4|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|@$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|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

Currently so many people facing problem to update the useState hook state. I use this approach to update it safely and wanted to share it here.
This is my state
<pre><code>const [state, setState] = useState([])
</code></pre>
Suppose I have a object name <code>obj1</code> and I want it to append in my state. I will suggest to do it like this
<pre><code>setState(prevState =&gt; [...prevState, obj1])
</code></pre>
This will safely insert the object at the end and also keep the state consistency

blocks|key|4571329|text|this.setState(preState=>({arrayvar:[...prevState.arrayvar,newelement]}))|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4571330|这将解决这个问题。|unstyled|4571331|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>this.setState(preState=&gt;({arrayvar:[...prevState.arrayvar,newelement]}))
</code></pre>
this will work to solve this problem.

blocks|key|4571352|text|//get+the+value+you+want+to+add
const+valor1+=+event.target.elements.valor1.value;

//add+in+object+
++++++++const+todo+=+{
++++++++++++valor1,
++++++++}

//now+you+just+push+the+new+value+into+the+state

//prevlista+is+the+value+of+the+old+array+before+updating,+it+takes+the+old+array+value+makes+a+copy+and+adds+a+new+value

setValor(prevLista+=>{
return+prevLista.concat(todo)+})|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4571353|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre class="lang-js prettyprint-override"><code>//get the value you want to add
const valor1 = event.target.elements.valor1.value;

//add in object 
 const todo = {
 valor1,
 }

//now you just push the new value into the state

//prevlista is the value of the old array before updating, it takes the old array value makes a copy and adds a new value

setValor(prevLista =&gt;{
return prevLista.concat(todo) })
 
</code></pre>

blocks|key|65001|text|状态是一个对象。对于您的用例状态，可能如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|65002|this.state+=+{
++++items:+[],
}|code-block|syntax|javascript|65003|新状态的引用必须与旧状态不同。|65004|所以试试这个：|65005|this.setState({
++++items:+[
++++++++...this.state.items,
++++++++newElement,
++++],
})|65006|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

State is an object. for your usecase state may something like this:
<pre><code>this.state = {
 items: [],
}
</code></pre>
The reference of new state must be different than the old state.
So try this:
<pre><code>this.setState({
 items: [
 ...this.state.items,
 newElement,
 ],
})
</code></pre>

I want to add an element to the end of a <code>state</code> array, is this the correct way to do it?
<pre><code>this.state.arrayvar.push(newelement);
this.setState({ arrayvar:this.state.arrayvar });
</code></pre>
I'm concerned that modifying the array in-place with <code>push</code> might cause trouble - is it safe?
The alternative of making a copy of the array, and <code>setState</code>ing that seems wasteful.

Correct modification of state arrays in React.js

我想在state数组的末尾添加一个元素，这是正确的方法吗？this.state.arrayvar.push(newelement);this.setState({ arrayvar:this.state.arrayvar });我担心用push就地修改数组可能会带来麻烦-它安全吗？另一种方法是制作数组的副本，然后使用s...

问正确修改React.js中的状态数组
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问正确修改React.js中的状态数组EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问正确修改React.js中的状态数组
EN