我有兩個物件：第一個狀態
[{ "orders": [{ "id": "1587881", "uid": "237603" }, { "id": "1587880", "uid": "237603" }] }]
并添加新資料
[{ "orders": [{ "id": "1587879", "uid": "237603" }, { "id": "1587878", "uid": "237603" }] }]
我需要獲得新的狀態
[{ "orders": [{ "id": "1587881", "uid": "237603" }, { "id": "1587880", "uid": "237603" }, { "id": "1587879", "uid": "237603" }, { "id": "1587878", "uid": "237603" }] }]
請幫助我！
我試試
import React, { Component } from 'react';
class Orders extends Component {
constructor(props) {
super(props);
this.state = {
data: [{ "orders": [{ "id": "1587881", "uid": "237603" }, { "id": "1587880", "uid": "237603" }] }]
};
}
loadingData = () => {
const add = [{ "orders": [{ "id": "1587879", "uid": "237603" }, { "id": "1587878", "uid": "237603" }] }];
this.setState({ data: [...this.state.data, ...add] });
}
componentDidMount() {
this.loadingData();
}
render() {
console.log(this.state.data);
return (
<div className="page" >
</div>
);
}
}
export default Orders;
但是我沒有得到單個資料陣列……創建了兩個單獨的陣列。我怎樣才能解決這個問題？
PS 我正在接收這種格式的資料，但我無法修復物件的格式。
uj5u.com熱心網友回復：
您是說狀態data是一個物件陣列，此回應假設您將向該陣列的相同第一個索引添加訂單。
loadingData = () => {
const add = [{ "orders": [{ "id": "1587879", "uid": "237603" }, { "id": "1587878", "uid": "237603" }] }];
this.setState(oldState => {
const newData = { ...oldState.data };
add[0].orders.forEach(x => newData[0].orders.push(x));
return { data: newData };
});
}
uj5u.com熱心網友回復：
這是一個作業示例：https : //codesandbox.io/s/elated-lederberg-i3rtb?file=/src/App.js
您可以對陣列的第一個元素進行解構，然后按照您想要的方式重建。
const array1 = [
{
orders: [
{ id: "1587881", uid: "237603" },
{ id: "1587880", uid: "237603" }
]
}
];
const array2 = [
{
orders: [
{ id: "1587879", uid: "237603" },
{ id: "1587878", uid: "237603" }
]
}
];
const [firstEl] = array1;
const [secondEl] = array2;
console.log([{ orders: { ...firstEl.orders, ...secondEl.orders }
}]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/353373.html
標籤：javascript 反应