使用useState有条件地更新部分状态

时间:2020-02-21 20:29:23

标签: javascript reactjs react-hooks react-state-management use-state

我正在尝试更新我的状态以包含新的信息对象 if ,该新信息对象的名称与该状态中的名称相同。例如....

新信息时:

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


匹配现有状态的名称:

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

目标是我可以然后合并 just 属性,结果是:

{
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
            }
          }
        }
      ]);
    }
  };

1 个答案:

答案 0 :(得分:0)

我将忽略目标之后的部分,并执行以下操作:

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];
  }
}