时间戳

首页 > 解决方案 > reactjs中的多维状态更新

javascript - reactjs中的多维状态更新

问题描述

我正在使用 reactjs 中的复杂状态对象，我无法更新状态的特定项目。

state = {
    order: {
      jobs: [
        {
          id: "1",
          jobId: "31147-02",
          services: [
            {
              id: 18,
              price: "100",
            },
            {
              id: 19,
              price: "100",
            },
            {
              id: 65,
              price: "3200",
            },
            {
              id: 87,
              price: "1800",
            },
            {
              id: 88,
              price: "1350",
            },
            {
              id: 89,
              price: "1350",
            },
          ],
        },
        {
          id: "2",
          jobId: "31147-02",
          services: [
            {
              id: 45,
              price: ""
            },
            {
              id: 41,
              price: "",
            },
            {
              id: 28,
              price: "",
            },
          ],
        },
      ],
    },
  };

并尝试处理删除功能

下面的代码是接收 JOB 的索引和需要从状态中删除以执行删除功能的服务对象。

handleJobServiceDelete = (jobId, service) => {
    let jobs = [...this.state.order.jobs[jobId].services];
    jobs = jobs.filter((s) => s.id !== service.id);
    console.log(jobs);
    this.setState({ jobs });
};

但是在从中删除对象后，我无法使用更新的服务数组设置状态。

标签： javascript

解决方案

您需要使用this.setState({ order: { jobs } });，但这不起作用，因为 React 不会完全设置状态，因此需要更多时间。

this.setState((prevState)=>({ order: {...prevState.order, jobs } }));

我通常会像这样管理深度嵌套状态的方式是使用https://github.com/kolodny/immutability-helper，因为它更容易管理。

编辑：使用不变性助手修复了完整的问题。存在与我最初注意到的不同的问题。由于变量名，我没有意识到被更改的数据是作业的服务，因此必须返回到作业的服务而不是替换作业。

import update from 'immutability-helper';

this.setState((prevState) => {
  const idx = prevState.order.jobs[jobId].services.findIndex(
    (s) => service.id === s.id
  );
  return {
    order: update(prevState.order, {
      jobs: { [jobId]: { services: { $splice: [[idx, 1]] } } },
    }),
  };
});

推荐阅读