Question

我需要修改具有内部数组对象的组件状态。修改对象数组没有问题，但我想更新具有 action 格式的内部对象数组 value 。它不会将操作值更新为“无需执行任何操作” 。 map()函数有什么问题？预先感谢。

let example_response = {
  data: [
    {
 
      details: [
        {
          format: "date",
          value: "2020-04-29T15:03:44.871Z",
          title: "Date"
        },
        {
          format: "action",
          value: "-",
          title: "Action"
        }
      ],
      id: 13409,
      isSelected:true
    },   {
 
      details: [
        {
          format: "date",
          value: "2019-04-29T15:03:44.871Z",
          title: "Date"
        },
        {
          format: "action",
          value: "-",
          title: "Action"
        }
      ],
      id: 13409,
      isSelected:false
    }
  ]
};
 const newList = example_response.data.map((item) => {
    if (item.isSelected) {
      item.details.map((elem) => {
        if (elem.format === "action") {
          const updatedElem = {
            ...elem,
            value: "No Action Needed"
          };
          return updatedElem;
        }       
      });
    }
    return item;
  });
console.log(newList);

Answer 1

我发现了2个问题：

您没有修改item.details（您只是在映射它）。
您仅在updatedElem时返回elem.format === "action"，但您将返回其他任何内容

尝试

let example_response = {
  data: [{

    details: [{
        format: "date",
        value: "2020-04-29T15:03:44.871Z",
        title: "Date"
      },
      {
        format: "action",
        value: "-",
        title: "Action"
      }
    ],
    id: 13409,
    isSelected: true
  }, {

    details: [{
        format: "date",
        value: "2019-04-29T15:03:44.871Z",
        title: "Date"
      },
      {
        format: "action",
        value: "-",
        title: "Action"
      }
    ],
    id: 13409,
    isSelected: false
  }]
};
const newList = example_response.data.map((item) => {
  if (item.isSelected) {
    item.details = item.details.map((elem) => {
      if (elem.format === "action") {
        elem.value = "No Action Needed";
      }
      return elem;
    });
  }
  return item;
});
console.log(newList);

Answer 2

let example_response = {
  data: [{
      details: [{
          format: "date",
          value: "2020-04-29T15:03:44.871Z",
          title: "Date"
        },
        {
          format: "action",
          value: "-",
          title: "Action"
        }
      ],
      id: 13409,
      isSelected: true
    },
    {
      details: [{
          format: "date",
          value: "2019-04-29T15:03:44.871Z",
          title: "Date"
        },
        {
          format: "action",
          value: "-",
          title: "Action"
        }
      ],
      id: 13409,
      isSelected: false
    }
  ]
};
const newList = example_response.data.map(item => item.isSelected
  ? item.details.map(elem => elem.format === "action"
    ? ({ ...elem, value: "No Action Needed" })
    : elem)
  : item.details);
  
console.log(newList);

Answer 3

由于您已经使用顶级map方法创建了一个新数组，因此可以使用forEach并分配值。

let example_response = {
  data: [
    {
 
      details: [
        {
          format: "date",
          value: "2020-04-29T15:03:44.871Z",
          title: "Date"
        },
        {
          format: "action",
          value: "-",
          title: "Action"
        }
      ],
      id: 13409,
      isSelected:true
    },   {
 
      details: [
        {
          format: "date",
          value: "2019-04-29T15:03:44.871Z",
          title: "Date"
        },
        {
          format: "action",
          value: "-",
          title: "Action"
        }
      ],
      id: 13409,
      isSelected:false
    }
  ]
};

const newList = example_response.data.map((item) => {
  if (item.isSelected) {
    item.details.forEach((elem) => {
      if (elem.format === "action") {
        elem.value = "No Action Needed";
      }       
    });
  }
  return item;
});

console.log(newList);

Answer 4

您的代码不返回修改后的项目，只是在选择该项目时映射到详细信息。确保您也在else子句中返回了某些内容。这是一个使用速记符号的示例：

const elementUpdater = (element) => element.format === 'action' ? {...element, value: 'No action needed'} : element
const itemDetailsUpdater = (item) => item.isSelected ? item.details.map(elementUpdater) : item

example_response.data.map(itemDetailsUpdater)

哪个产量：

[
    [
        {
            "format": "date",
            "value": "2020-04-29T15:03:44.871Z",
            "title": "Date"
        },
        {
            "format": "action",
            "value": "No action needed",
            "title": "Action"
        }
    ],
    {
        "details": [
            {
                "format": "date",
                "value": "2019-04-29T15:03:44.871Z",
                "title": "Date"
            },
            {
                "format": "action",
                "value": "-",
                "title": "Action"
            }
        ],
        "id": 13409,
        "isSelected": false
    }
]

如何在js中更新嵌套对象数组？

4 个答案: