reactjs 中的多维 state 更新

Question

I am working with a complex state object in reactjs and I am unable to update a particular item of the state.

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: "",
            },
          ],
        },
      ],
    },
  };

And trying to handle delete functionality

Following code of is receiving the index of JOB and the object of service which needs to be removed from the state to perform delete functionality.

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

But I am unable to setState with updated service array after removing object from it.

Answer 1

You'd need to use this.setState({ order: { jobs } }); , but that wouldn't work because React won't set the state fully, so it takes a bit more.

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

The way I would ordinarily manage deeply nested state like this is using https://github.com/kolodny/immutability-helper as it makes it much easier to manage.

Edit: Fixed the full issue using immutability helper. There were different issues than I originally noticed. I didn't realize due to the variable names that the data being altered was the job's services and so had to go back into the job's services rather than replacing the jobs.

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