如何使用 useState 将映射的道具传递给组件？

Question

我有一个购物车组件，我通过了一个 useState 道具来更新购物车中的商品数量/购物车价值：

import { data } from "./data";

export default function StoreItems({ addToCart, Total, setTotal }) {
  const addToTotal = (data) => {
    addToCart();
    setTotal(Total + data.price);
  };
  return (
          <Grid container spacing={3}>
            {data.map((data) => (
              <Grid item key={data.id} xs={12} sm={6} md={3}>
                <Card>
                  <CardMedia
                    image={data.image}
                  />
                  <CardActions>
                    <div>
                      <Button>Buy</Button>
                      <Button
                        size="small"
                        sx={{ marginLeft: "5px" }}
                        onClick={addToTotal}
                      >
                        Add to Cart
                      </Button>
                    </div>
                  </CardActions>
                </Card>
              </Grid>
            ))}
          </Grid>
  );
}

数据是一个 JavaScript 数组，其中包含如下所示的对象：

export const data = [
  {
    id: 1,
    title: "item 1",
    content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac aliquam nunc. 
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.`,
    image: "https://source.unsplash.com/random/1",
    price: 5000,
  },
];

道具传承自：

function Store() {
  const [cartCount, setCartCount] = useState(0);
  const [Total, setTotal] = useState(0);

  const addToCart = () => {
    setCartCount(cartCount + 1);
  };

  return (
    <>
      <div>
            <StoreItems
              Total={Total}
              setTotal={setTotal}
              addToCart={addToCart}
            />
      </div>
    </>
  );
}

export default Store;

为什么我无法将 data.price 的价格添加到 useState - Total 对象

Answer 1

首先改变这个：data.map((data) => ....

对此：

 data.map((item) => ....

您需要将价格传递给 onClick 函数：

 <Button
 size="small"
 sx={{ marginLeft: "5px" }}
 onClick={() => addToTotal(item.price)}>
 Add to Cart
 </Button>

然后将 addToTotal 函数更改为：

const addToTotal = (price) => {
    addToCart();
    setTotal(Total + price);
  };

Answer 2

您在 StoreItems 组件中使用 addToTotal 的方式存在问题。首先，该函数需要传递 data 数组中的一项，但您并未明确地这样做。在您的实现中，该函数获取点击事件而不是 data 数组项。其次，最好重命名 map 的箭头函数中的第一个参数，因为它会混淆 data 数组及其项。以下是您需要如何更新组件以使其正常工作：

import { data } from "./data";

export default function StoreItems({ addToCart, Total, setTotal }) {
  const addToTotal = (item) => {
    addToCart();
    setTotal(Total + item.price);
  };
  return (
          <Grid container spacing={3}>
            {data.map((item) => (
              <Grid item key={item.id} xs={12} sm={6} md={3}>
                <Card>
                  <CardMedia
                    image={data.image}
                  />
                  <CardActions>
                    <div>
                      <Button>Buy</Button>
                      <Button
                        size="small"
                        sx={{ marginLeft: "5px" }}
                        onClick={() => addToTotal(item)}
                      >
                        Add to Cart
                      </Button>
                    </div>
                  </CardActions>
                </Card>
              </Grid>
            ))}
          </Grid>
  );
}

这是一个经过修复的简化 playground：https://stackblitz.com/edit/Whosebug-71871965?file=src%2FStoreItems.js

如何使用 useState 将映射的道具传递给组件？

How do I pass mapped props to a component using useState?

javascript

reactjs

react-hooks

use-state