ReactJS: добавление нового объекта в существующий массив с распространением

Question

У меня есть этот массив объектов, чтобы начать с

[
  {
    "name": "child",
    "pax": {}
  }
]

Я хочу добавить новое свойство, которое является массивом. тогда я хочу обновить / вставить новый объект в этот массив. Но что-то не так с моим кодом

<code>function App() {
  const [num, setNum] = useState(0);
  const [arr, setArr] = useState([
    {
      name: "child",
      pax: {}
    }
  ]);

  function appendage({ id, age }) {
    const toSaveArr = arr.map(o => {
      if (o.name === "child") {
        return {
          ...o,
          age: o.age
            ? o.age.map(o2 => {
                if (o2.id === id) {
                  return {
                    id: o2.id,
                    age
                  };
                }
                console.log("o2", o2);
                //something is wrong here
                //why is it not adding new object?
                return [
                  ...o2,
                  {
                    id,
                    age
                  }
                ];
              })
            : [{ id, age }]
        };
      }
      return o;
    });

    setArr(toSaveArr);
  }

  return (
    <div className="App">
      <h1>{num}</h1>
      <button
        onClick={() => {
          setNum(num + 1);

          appendage({
            id: num + 1,
            age: num + 1
          });
        }}
      >
        add
      </button>
      <button>update age where id equal to 2</button>
      <pre>{JSON.stringify(arr, null, 2)}

); }

https://codesandbox.io/s/pedantic-mclean-107q2

Я думаю, что я неправильно использовал оператор распространения.

Answer 1

вы можете использовать метод find в вашем массиве, чтобы найти конкретное значение, которое здесь "child":

<code>import React, { useState, useDebugValue } from "react";
import styled from "styled-components";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [num, setNum] = useState(0);
  const [arr, setArr] = useState([
    {
      name: "child",
      pax: []
    }
  ]);

  function appendage({ id, age }) {
    var newarr = arr;
    var add = {
      id: id,
      age: age
    };
    newarr.find(el => el.name === "child").pax = [
      ...newarr.find(el => el.name === "child").pax,
      add
    ];

    setArr(newarr);
  }

  return (
    <div className="App">
      <h1>{num}</h1>
      <button
        onClick={() => {
          setNum(num + 1);

          appendage({
            id: num + 1,
            age: num + 1
          });
        }}
      >
        add
      </button>
      <button>update age where id equal to 2</button>
      <pre>{JSON.stringify(arr, null, 2)}

);} const rootElement = document.getElementById ("root");ReactDOM.render (, rootElement);

Answer 2

мы проверяем, существует ли уже объект возраста, если да, мы добавляем новый объект, используя оператор распространения;если нет, мы вставляем объект;

релевантный код :

<code>import React, { useState } from "react";
import styled from "styled-components";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [num, setNum] = useState(0);
  const [arr, setArr] = useState([
    {
      name: "child",
      pax: {}
    }
  ]);

  function appendage({ id, age }) {
    console.log("inside appendage with ", id, " and age:", age);
    const toSaveArr = arr.map(o => {
      if (o.name === "child") {
        if (o.age) {
          console.log("age exists");
          o.age = [
            ...o.age,
            {
              id: id,
              age: age
            }
          ];
          console.log("O", o);
        } else {
          o.age = [
            {
              id: id,
              age: age
            }
          ];
          console.log("O", o);
        }
        /*return {
          ...o,
          age: o.age
            ? o.age.map(o2 => {
                if (o2.id === id) {
                  return {
                    id: o2.id,
                    age
                  };
                }
                console.log("o2", o2);
                //something is wrong here
                //why is it not adding new object?
                return [
                  ...o2,
                  {
                    id,
                    age
                  }
                ];
              })
            : [{ id, age }]
        };
      */
      }
      return o;
    });

    setArr(toSaveArr);
  }

  return (
    <div className="App">
      <h1>{num}</h1>
      <button
        onClick={() => {
          setNum(num + 1);

          appendage({
            id: num + 1,
            age: num + 1
          });
        }}
      >
        add
      </button>
      <button>update age where id equal to 2</button>
      <pre>{JSON.stringify(arr, null, 2)}

);} const rootElement = document.getElementById ("root");ReactDOM.render (, rootElement);

рабочий код и поле здесь

Answer 3

Проблема в том, что функция, которую вы передаете в map, возвращает массив, но это не то, как map работает.Вы можете изменять только существующие объекты в массиве, но не добавлять новые.Что вы можете сделать, это использовать, например, find, чтобы найти объект в массиве и проверить, является ли результат undefined.

const result = o.age.find(o2 => o2.id === id);
if (result) {
    result.age = age;
} else {
    o.age.push({ id: o2.id, age: age });
}