javascript - 使用 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];
  }
}