如何在更新 javascript 中的一个元素时更改所有数组？

Question

我需要在数组中始终只有一个元素为true 。

假设我有一个数组

let data = [
  { letter: "a", id: 1, bool: false },
  { letter: "b", id: 2, bool: false },
  { letter: "c", id: 3, bool: false},
  { letter: "d", id: 4, bool: false },
];

每次我单击一个元素时，我都需要将其更改为true而所有其他元素都更改为false 。 我有一个 function

const updatedArray = data.map((item) => {
  if (item.id === id) {
    return {
      ...item,
      bool: true,
    };
  }
  return item;
});

但它可以作为点击元素的切换。

Answer 1

您的问题在这里： return item; ，您实际上是在返回先前的值，并且只是更新与id变量具有相同 id 的 item 的bool属性，但是您需要切换所有项目的bool属性，您可以像这样实现您的目标：

const updatedArray = array.map((item) => ({...item, bool: item.id === id}));

Answer 2

如果它不是选定的项目，您还需要将项目的bool设置为 false，而不仅仅是将选定项目的bool设置为 true。 这应该有效：

const id = 3 (clicked item)
const updatedArray = array.map(item => {
  if (item.id === id) {
    return {
      ...item,
      bool: true
    };
  }
  return {
    ...item,
    bool: false
  }
});