Блог

У меня есть ниже макет данных, основанных на свойстве объекта, необходимо обновить их соответствующее значение с помощью оператора распространения. Я не могу этого сделать, потому что он вложенный.

Я могу достичь этого, используя приведенный ниже подход, но, как вы можете видеть, строка кода увеличивается. Но мы определенно можем уменьшить использование оператора распространения. Поскольку в свойстве «title» я обновляю только индекс 0, а в левом столбце обновляется только значение метки, остальное остается тем же.

 const mockData = {
  title: ["Javascript", "Selected Topic"],
  leftColumn: [
    {
      key: "name",
      label: "Javascript Topic Name",
      type: "string",
    },
    {
      key: "id",
      label: "Javasctipt Topic Id",
      type: "string",
    },
  ],
};

const handleType = (val) => {
  switch (val.type) {
    case "Javascript":
      return {
        ...mockData,
      };
    case "Angular":
      return {
        ...mockData,
        title: ["Angular", "Selected Topic"],
        leftColumn: [
          {
            key: "name",
            label: "Angular Topic Name",
            type: "string",
          },
          {
            key: "id",
            label: "Angular Topic Id",
            type: "string",
          },
        ],
      };
    case "React":
      return {
        ...mockData,
        title: ["React", "Selected Topic"],
        leftColumn: [
          {
            key: "name",
            label: "React Topic Name",
            type: "string",
          },
          {
            key: "id",
            label: "Reacr Topic Id",
            type: "string",
          },
        ],
      };
  }
};
 

я пытаюсь использовать что-то ниже, но не получаю желаемого результата

 const handleType = (val) => {
  const newArray = [mockData];
  console.log("newArray", newArray);
  //   const index = mockData.findIndex((ele) => ele);
  //   console.log("index", index);
  //   newArray["title"][0] = "React";
  //   console.log("newArray ==>", newArray);
  switch (val.type) {
    case "Javascript":
      return {
        ...mockData,
      };
    case "Angular":
      mockData.title[0] = "Angular";
      return mockData.leftColumn.map((val, index) => {
          let value = { ...val, label: "Angular",};
          return Object.assign({}, value);
      });
    case "React":
      return {
        ...mockData,
        title: ["React", "Selected Topic"],
        leftColumn: [
          {
            key: "name",
            label: "React Topic Name",
            type: "string",
          },
          {
            key: "id",
            label: "Reacr Topic Id",
            type: "string",
          },
        ],
      };
  }
};

const type = {
  type: "Angular",
};

console.log("Angular", handleType(type));