Условно обновить часть состояния с помощью useState

Question

Я пытаюсь обновить свое состояние, чтобы включить новый информационный объект , если имя этого нового информационного объекта имеет то же имя, что и имя в состоянии. Например ....

когда новая информация:

{
serviceName:
    name: A
    properties:{
    cost: 300
    service:"Good"
    }
}

соответствует названию существующего состояния:

{
serviceName:
    name: A
    properties:{
    cost: 600
    service:"Bad"
    }
}

Цель состоит в том, чтобы я мог затем объединить просто свойств, в результате чего:

{
serviceName:
    name: A
    properties:{
    cost: [300,600]
    service:["Good", "Bad"]
    }
}

Ближайшие полученные мной работы работают при первом совпадении, но последующие совпадения приводят к массиву массивов, например так (совпали три элемента) таким образом, должен был быть массив с 3 элементами в стоимости и обслуживании):

{
    "name": "State",
    "value": [
      {
        "serviceName": {
          "name": "Informational Website - subscription",
          "properties": {
            "service": [
              [
                "Mobile-ready, Responsive Design",
                "Blog Articles"
              ],
              "Collect visitor information (email / phone)"
            ],
            "cost": [
              [
                "300",
                "500"
              ],
              "500"
            ]
          }
        }
      }
    ],
    "subHooks": []
  },

Я достиг вышеупомянутого с помощью следующего кода:

  const [informationalService, setInformationalService] = useState([]);

  const handleChecking = (e, item) => {
    const { name } = e.target;
    if (informationalService.length > 0) {
      const selectedName = informationalService.filter(
        selection => selection.serviceName.name === name
      );

      const selectedNamePropertiesCost = selectedName.map(
        prop => prop.serviceName.properties.cost
      );

      const selectedNamePropertiesService = selectedName.map(
        prop => prop.serviceName.properties.service
      );

      const notSelectedName = informationalService.filter(
        selection => selection.serviceName.name !== name
      );
      const serviceChecked = selectedName.filter(
        selected => selected.serviceName.properties.service !== item.service
      );

      setInformationalService([
        ...notSelectedName,
        {
          serviceName: {
            name,
            properties: {
              service: [...selectedNamePropertiesService, item.service],
              cost: [...selectedNamePropertiesCost, item.cost]
            }
          }
        }
      ]);
    } else {
      setInformationalService([
        {
          serviceName: {
            name,
            properties: {
              service: item.service,
              cost: item.cost
            }
          }
        }
      ]);
    }
  };

Answer 1

Я собираюсь игнорировать часть после вашей цели и сделать это:

let data = {
serviceName: {
    name: "A",
    properties:{
    cost: 300,
    service:"Good"
    }
}
let olddata = {
serviceName: {
    name: "A",
    properties:{
    cost: 600,
    service:"Bad"
    }
};
let newprops = {},
 dataprops = data.serviceName.properties,
 olddataprops = olddata.serviceName.properties;

for (let prop in dataprops) {
  if (olddataprops[prop]) {
    newprops[prop] = [dataprops[prop], olddataprops[prop]];
  } else {
    newprops[prop] = dataprops[prop];
  }
}