我是 React 的新手，不幸的是在搜索后我沒有找到我的解決方案。下面的代碼是我的主要組件，并保存為 product.jsx：
import React, { useState } from "react";
const Product = ({countt,productName,children}) => {
const [count, setCount] = useState(countt);
return (
<>
<span className="m-2 text-info">{productName}</span>
<span className="m-2 badge bg-primary">{format()}</span>
<button onClick={handleIncrement} className="m-2 btn btn-sm btn-success">
</button>
<button onClick={handleDecrement} className="m-2 btn btn-sm btn-warning">
-
</button>
<button className="m-2 btn btn-sm btn-danger">delete</button>
<img
src="https://picsum.photos/200"
style={{ borderRadius: "50px" }}
alt="#"
/>
{children}
</>
);
function handleIncrement() {
setCount(count 1);
}
function handleDecrement() {
setCount(count - 1);
}
function format() {
if (count === 0) {
return "zero";
} else {
return count;
}
}
};
export default Product;
這是我的 products.jsx 組件：
import React, { useState } from "react";
import Product from "./product";
const Products = () => {
const [products, setProducts] = useState([
{ id: 1, productName: "Laptop", countt: 2 },
{ id: 2, productName: "Phone", countt: 3 },
{ id: 3, productName: "Console", countt: 7 },
]);
return (
<>
{products.map((p, index) => {
<Product
key={index}
productName={p.productName}
count={p.count}
></Product>;
})}
</>
);
};
export default Products;
這些代碼運行良好，但問題是當我點擊一個按鈕時，它會顯示 NaN。
我嘗試了不同的方式，我只想以實用的方式來做。
uj5u.com熱心網友回復：
count在countt子組件中。（或其他方式。保持不變）
{ id: 1, productName: "Laptop", countt: 2 },
countt={p.countt}
此外，括號內缺少map
return (
<>
{products.map((p, index) => (
<Product
key={index}
productName={p.productName}
countt={p.countt}
></Product>;
))}
</>
);
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/520563.html