Javascript 从数组中移除项并将其添加到另一个数组中

我设法从WaitingPaymentList中删除该项目，并将其添加到addedToCartList中，但看起来我做错了什么，因为它正在添加对象，但前面的项目已替换为数字：）。在第一次单击时，数组中有一个包含所有数据的对象，但是在每次单击之后都是这样的=>[1,2,3，{}]。 当我在AddToCarthHandler函数外部记录addedToCartList时，它显示的是一个数组：[1]：））

---

因为有一些代码，我希望我不会像上次那样收到很多负面评论。如果可能的话，给我一个提示，如何使所有项目一次转移，因为会有一个按钮添加所有。谢谢您的时间。

我认为这行代码导致了问题：

export default function ShoppingCart() {
  const classes = useStyle();
  const {
    productsList, filteredProductsList, setFilteredProductsList, setProductsList,
  } = useContext(productsContext);
  const [awaitingPaymentList, setAwaitingPaymentList] = useState([]);
  const [addedToCartList, setAddedToCartList] = useState([]);
 

  const addToCartHandler = useCallback((itemId) => {
    const awaitingPaymentListIds = awaitingPaymentList.map((item) => item.id);
    const isInAwaitingPaymentList = awaitingPaymentListIds.includes(itemId);

    isInAwaitingPaymentList ? setAddedToCartList([...addedToCartList, addedToCartList.push(awaitingPaymentList[awaitingPaymentList.findIndex((item) => item.id === itemId)])]) : setAddedToCartList([...addedToCartList]);

    isInAwaitingPaymentList
      ? setAwaitingPaymentList(awaitingPaymentList.splice(awaitingPaymentList.findIndex((item) => item.id === itemId), 1))
      : setAwaitingPaymentList([...awaitingPaymentList ])

    setProductsList(awaitingPaymentList);
  }, [addedToCartList, awaitingPaymentList, setProductsList]);

  useEffect(() => {
    setFilteredProductsList(
      productsList.filter((product) => product.status === 'AWAITING_PAYMENT'),
    );
  }, [productsList, setFilteredProductsList, setFilteredProductsList.length]);

  useEffect(() => {
    setAwaitingPaymentList(filteredProductsList);
  }, [filteredProductsList]);

返回要推入的数组的新长度，这可能是递增元素值的来源。

push

也是一种状态突变

现在还不清楚您希望这个代码做什么，但我认为推送是不必要的。也许您只是想将最后一个元素附加到正在构建的新数组中

isInAwaitingPaymentList
  ? setAddedToCartList([
      ...addedToCartList,
      addedToCartList.push(
        awaitingPaymentList[
          awaitingPaymentList.findIndex((item) => item.id === itemId)
        ]
      )
    ])
  : setAddedToCartList([...addedToCartList]);

---

你能提供一个工作代码笔或类似的吗？是的，非常感谢。我想知道几个小时，我在这里做错了什么。：）@DragoJokera过滤器函数从第一个数组中删除元素。你能为这个组件提供一个运行的代码沙盒吗？我认为您不需要连接上下文提供程序，但是如果您可以模拟本地组件状态并呈现此组件，我可以看看数据是如何通过它的。也许您在其他地方遇到了更多的状态突变/更新问题。这是我的@DragoJokera您是否正在尝试在

addToCarthHandler

函数中的更新后立即记录状态？这将只记录当前状态，而不是下一个渲染周期的排队状态。尝试在自己的

useffect

hook中使用适当的依赖项记录状态。我已将日志添加到我的链接沙盒中。@DragoJokera好的，因此您需要先浅拷贝

addedToCartList

的当前内容，然后浅拷贝

WaitingPaymentList

的内容，而不是完全覆盖

addedToCartList

。例如

constaddalltocart=（）=>{setAddedToCartList（cart=>[…cart，…waitingpaymentlist]）；setwaitingpaymentlist（[]）；}。是的，这很好，我试过了，但我只是简单地复制了addedToCartList和WaitingPaymentList的当前内容，而没有做简单的复制
addAllToCart=（）=>{setAddedToCartList（购物车=>[…购物车，等待付款清单]）
。再次感谢。
isInAwaitingPaymentList
  ? setAddedToCartList([
      ...addedToCartList, // <-- copy state
      awaitingPaymentList[ // <-- add new element at end
        awaitingPaymentList.findIndex((item) => item.id === itemId)
      ]
    ])
  : setAddedToCartList([...addedToCartList]);

const itemToMove = awaitingPaymentList.find(item => item.id === itemId);
setAwaitingPaymentList(list => list.filter(item => item.id !== itemId));
itemToMove && setAddedToCartList(list => [...list, { ...itemToMove }])