Tengo dos objetos: primer estado
[{ "orders": [{ "id": "1587881", "uid": "237603" }, { "id": "1587880", "uid": "237603" }] }]y agregar nuevos datos
[{ "orders": [{ "id": "1587879", "uid": "237603" }, { "id": "1587878", "uid": "237603" }] }]necesito obtener un nuevo estado
[{ "orders": [{ "id": "1587881", "uid": "237603" }, { "id": "1587880", "uid": "237603" }, { "id": "1587879", "uid": "237603" }, { "id": "1587878", "uid": "237603" }] }]¡Por favor, ayúdame!
lo intento
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;Pero no obtengo una sola matriz de datos... se crean dos matrices separadas. ¿Cómo puedo arreglar esto?
PD Estoy recibiendo datos en este formato y no puedo corregir el formato del objeto.
Está diciendo que los data estado son una matriz de objetos, esta respuesta supone que agregará órdenes al mismo primer índice en esa matriz.
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 }; }); }Aquí un ejemplo de trabajo: https://codesandbox.io/s/elated-lederberg-i3rtb?file=/src/App.js
Puede destruir el primer elemento de la matriz y luego reconstruirlo de la manera que desee.
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; // Update your state here setOrders([{ orders: { ...firstEl.orders, ...secondEl.orders } }]) console.log([{ orders: { ...firstEl.orders, ...secondEl.orders } }]);