React：向无状态组件传函数再至类组件时出现报错

这个问题我碰到过好多次，本质上是中间无状态组件的props传递环节出了疏漏。你在顶层Main组件已经做了绑定，直接传类组件没问题，那问题肯定出在无状态组件Product的传递步骤上，我给你拆解下常见原因和解决办法：

常见问题1：无状态组件漏传了getProduct props #

很多时候是写无状态组件时，忘了把从Main接收到的getProduct传递给下层的类组件。比如错误写法：

// 错误：没传递getProduct给ProductDetail
const Product = () => {
  return <ProductDetail />;
};

修正写法：先接收props，再明确传递给类组件：

// 正确：接收props并传递getProduct
const Product = (props) => {
  return <ProductDetail getProduct={props.getProduct} />;
};

如果无状态组件需要传递多个props，也可以用ES6展开运算符一次性传递所有props，更省心：

const Product = (props) => {
  return <ProductDetail {...props} />;
};

常见问题2：props名称拼写错误 #

比如传递时把getProduct写成了getproduct（大小写错误），或者其他拼写错误，导致类组件接收到的不是预期的函数：

// 错误：大小写写错了
const Product = (props) => {
  return <ProductDetail getproduct={props.getProduct} />;
};

修正写法：保持props名称完全一致：

const Product = (props) => {
  return <ProductDetail getProduct={props.getProduct} />;
};

常见问题3：无状态组件解构props时漏了getProduct #

如果用了解构语法接收props，但没把getProduct包含进去，就会导致传递时找不到这个函数：

// 错误：解构时没包含getProduct
const Product = ({ otherProp }) => {
  return <ProductDetail getProduct={getProduct} />; // getProduct未定义
};

修正写法：解构时明确包含getProduct：

const Product = ({ getProduct, otherProp }) => {
  return <ProductDetail getProduct={getProduct} />;
};

最后验证步骤 #

• 在无状态组件里加个console.log(props)，确认能接收到getProduct函数；
• 在类组件里也加个console.log(this.props)，确认getProduct存在且是函数类型；
• 确保类组件里调用的是this.props.getProduct()，没有拼写错误。

按照上面的步骤排查，基本就能解决这个问题啦！

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