React.js：如何向卡片添加項目？

Question

我正在學習 react.js 並嘗試實現基本的添加到購物車功能，試圖保持簡單，只是為了理解流程。
我有兩張卡片，其中一張卡片中列出了項目，選擇項目並單擊按鈕后，相應的項目應出現在另一張卡片中。
據我了解，我需要以某種方式過濾並檢查唯一屬性是否與參數匹配，然后添加到卡片中。
請找到Codesandbox 鏈接和下面的代碼

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import { styled } from "@mui/material/styles";
import React, { useState, useEffect } from "react";

const StyledBox = styled("div")({
  paddingRight: "70px",
  paddingLeft: "70px",
  boxShadow: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px",
  backgroundColor: "#FFFFFF",
  border: "1px solid black",
  minHeight: "200px"
});

const AddToCard = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((result) => setData(result))
      .catch((e) => console.log(e));
  }, []);

  
  const addToCardHandleClick = (id) => {
    setData(
      data.map((item: any) => {
        const tempItem = data.find((item: any) => item === id);
        if (!tempItem) return [...item, { id }];
      })
    );
  };



  return (
    <Card sx={{ maxWidth: 700, minHeight: "300px" }}>
      <CardContent>
        <Box
          sx={{
            display: "flex",
            gap: "30px",
            justifyContent: "center",
            overflow: "auto"
          }}
        >
          <StyledBox sx={{ minWidth: "100px" }}></StyledBox>//The selected item should appear here after clicking
          <Box
            sx={{
              alignSelf: "center",
              gap: "10px"
            }}
          >
            <Button
              variant="outlined"
           onClick={() => addToCardHandleClick(null)} //instead of null should be correct property
            >
              Move
            </Button>
          </Box>
          <StyledBox>
            {data &&
              data.map((item) => (
                <ul key={item.id} style={{ listStyle: "none" }}>
                  <li>{item.name}</li>
                </ul>
              ))}
          </StyledBox>
        </Box>
      </CardContent>
    </Card>
  );
};
export default AddToCard;

任何幫助將不勝感激

Answer 1

我在代碼沙箱中試了一下： https : //codesandbox.io/s/imgmediacard-material-demo-forked-9nq22

我使用item.selected來跟蹤點擊的元素，一旦你點擊移動，我就會刪除item.selected屬性並添加item.moved = true代替......

如果您需要以正確的順序顯示移動的項目，您可以：

• 添加item.order = ++counter或item.order = Date.now()並按 item.order 對所有 item.moved 進行排序

• 對移動的項目使用單獨的數組