为什么我不能在函数中设置我的构造函数？

Question

我想设置一个构造函数来定义产品的默认值，但它似乎不起作用。我不知道是什么问题，请知道的人帮助我！非常感谢！

Products.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;

沙盒link 更清晰的观察：https://codesandbox.io/s/redux-shop-cart-forked-19huj?file=/src/components/Products.js

Answer 1

您正在使用 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

}, [])

More detail of useEffect

我在这里更新你的代码 Codesandbox

为什么我不能在函数中设置我的构造函数？

Why can't i set my constructor inside a function?

constructor

state

reactjs