Javascript 初学者重复/反应-如果未处于状态，则添加单个项目

我正在尝试将单个项添加到嵌套的Redux状态，如果该项不在列表中

我不在乎用简单的JS做，我要的是Redux酱汁ofc

我的状态是这样的：

  state: {
    data: {
      list: []
    },
  },

这是我在减速器中尝试的：

  return {
    ...state,
    data: {
      ...state.data,
      list: [action.payload.list, ...state.data.list]
    }
  }

问题是，有时我要添加的项在数组中已经了，因此我的列表中有一个重复项（我不想要）

如何在首先检查项目是否已删除时将其添加到列表中 已经到了吗

你可以使用这个方法。它将返回

true

或

false

并在匹配后立即停止对数组的迭代。例如：

case SOME_ACTION: {
  // iterate over the list and compare given item to item from action
  const existsInArray = state.data.list.some(l => l.id === action.payload.list.id)
  if(existsInArray) {
    return state;
  }

  return {
    ...state,
    data: {
      ...state.data,
      list: [action.payload.list, ...state.data.list]
    }
  }
}

编辑：

您在注释中写道，如果要生成的数组中存在该元素，则该元素将是列表中的第一项。我要做的是过滤掉这个元素（如果存在），然后将该项作为第一个元素从操作中放回：

case SOME_ACTION: {
  // filter out the element
  const copyOfArray = state.data.list.filter(l => l.id !== action.payload.list.id)
  // put to the beginning of the array
  copyOfArray.unshift(action.payload.list);

  return {
    ...state,
    data: {
      ...state.data,
      list: copyOfArray
    }
  }
}

你可以使用这个方法。它将返回

true

或

false

并在匹配后立即停止对数组的迭代。例如：

case SOME_ACTION: {
  // iterate over the list and compare given item to item from action
  const existsInArray = state.data.list.some(l => l.id === action.payload.list.id)
  if(existsInArray) {
    return state;
  }

  return {
    ...state,
    data: {
      ...state.data,
      list: [action.payload.list, ...state.data.list]
    }
  }
}

编辑：

您在注释中写道，如果要生成的数组中存在该元素，则该元素将是列表中的第一项。我要做的是过滤掉这个元素（如果存在），然后将该项作为第一个元素从操作中放回：

case SOME_ACTION: {
  // filter out the element
  const copyOfArray = state.data.list.filter(l => l.id !== action.payload.list.id)
  // put to the beginning of the array
  copyOfArray.unshift(action.payload.list);

  return {
    ...state,
    data: {
      ...state.data,
      list: copyOfArray
    }
  }
}

---

元素不会被复制，并且始终处于0索引

return {
    ...state,
    data: {
      ...state.data,
      list: [].concat(action.payload.list, state.data.list.filter(val=>val.id==action.payload.list.id))
    }
  }

---

元素不会被复制，并且始终处于0索引

return {
    ...state,
    data: {
      ...state.data,
      list: [].concat(action.payload.list, state.data.list.filter(val=>val.id==action.payload.list.id))
    }
  }

---

我得到的可能副本的可能副本未定义

l

@mokiliilo抱歉，已更新。但问题是你需要发明你自己的方法来比较对象。这只是一个例子，非常感谢。有没有办法将此元素放在列表的第一个位置？是的，但是如果项目已经在列表中，其位置不会更改。有没有办法强制执行这样一个事实，即最终位置将始终为0？我得到

l未定义

@mokiliilo抱歉，已更新。但问题是你需要发明你自己的方法来比较对象。这只是一个例子，非常感谢。有没有办法将此元素放在列表的第一个位置？是的，但是如果项目已经在列表中，其位置不会更改。有没有一种方法可以强制执行这样一个事实，即最终位置将始终为0？谢谢，更干净了！我们如何在不使用concat（）的情况下处理此问题？谢谢，更干净了！我们如何在不使用concat（）的情况下处理此问题？