我想設置一個構造函數來定義產品的默認值，但它似乎不起作用。我不知道是什麼問題，有人知道請幫助我！非常感謝！
產品.js：
import React from "react";
import Modal from 'react-modal';
function Products(props) {
var data = Array.from(props.products);
constructor(){
super(props)
this.state={
product:null
}
}
return (
<div>
<ul className="products">
{data.map((product) => {
return (
<li key={product._id}>
<div className="product">
<a>
<img src={product.image} alt={product.title} />
<p>{product.title}</p>
</a>
<div className="product-price">
<div>{product.price}</div>
<button onClick={() => props.addToCart(product)} className="button primary">Add to Cart</button>
</div>
</div>
</li>
);
})}
</ul>
</div>
);
}
export default Products;
更清晰觀察的沙箱鏈接：https : //codesandbox.io/s/redux-shop-cart-forked-19huj?file=/ src/components/ Products.js
您正在使用React functional component並且functional component不支持constructor您需要useState用於加載您的props.products但您也可以使用useEffect代替constructor來執行初始 api 調用或某些操作。
const [data, setData] = useState(props.products);
useEffect(()=>{
// here initial your data with default value
}, [])
在這裡，我在Codesandbox 中更新您的代碼
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句