為什么我不能在 function 中設置我的構造函數？

Question

我想設置一個構造函數來定義產品的默認值，但它似乎不起作用。 不知道是什么問題，有知道的請幫幫我！ 太感謝了！

產品.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

Answer 1

您正在使用React functional component並且functional component不支持您需要使用useState來加載props.products的constructor函數，但您也可以使用useEffect代替constructor來執行初始 api 調用或某些操作。

const [data, setData] = useState(props.products);

useEffect(()=>{

  // here initial your data with default value

}, [])

useEffect 的更多細節

在這里，我在Codesandbox中更新您的代碼