为什么不能在React函数组件内部定义constructor构造函数？

你当前定义的是React函数组件，constructor是类组件的专属语法，无法在函数组件内直接声明使用，这是代码无法正常生效的核心问题。

方案1：保留函数组件写法，改用Hook实现对应需求 #

函数组件使用useState Hook声明内部状态，可通过参数默认值或defaultProps设置属性默认值，修改后参考代码如下：

import React, { useState } from "react";
import Modal from 'react-modal';

// 直接在参数位置设置props默认值，可根据需求替换为你需要的默认product值
function Products(props = { products: [] }) {
  const data = Array.from(props.products);
  // 等价于类组件中this.state的product，如需设置默认值直接替换null即可
  const [product, setProduct] = useState(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>
  );
}

// 也可以选择用defaultProps设置属性默认值，和参数默认值二选一即可
Products.defaultProps = {
  products: []
}

export default Products;

方案2：改为类组件写法，保留constructor逻辑 #

如果需要继续使用constructor语法，可以把组件改为类组件写法，参考代码如下：

import React, { Component } from "react";
import Modal from 'react-modal';

class Products extends Component {
  // 类组件可正常使用constructor声明状态
  constructor(props){
    super(props)
    this.state={
      product:null
    }
  }

  render() {
    const data = Array.from(this.props.products);
    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={() => this.props.addToCart(product)} className="button primary">Add to Cart</button>
                  </div>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

// 类组件也可以设置defaultProps
Products.defaultProps = {
  products: []
}

export default Products;

内容的提问来源于stack exchange，提问作者na ha