为何React函数式组件的defaultProps未生效？

函数式组件里用defaultProps偶尔会出现默认值不生效的情况，React官方更推荐用函数参数默认值的写法，这是更可靠的方案，直接修改你的Course组件即可：

function Course({ 
  image = image1, 
  name = "Default Course", 
  price = "1 Like + 1 Subscribe" 
}) {
    return (
      <div className={Styles.card}>
        <img src={image} alt="" />
        <h2>{name}</h2>
        <p>{price}</p>
      </div>
    );
}

export default Course;

如果非要用defaultProps，先检查两个关键点：

• 确认image1已经正确导入到Course组件文件中，变量未定义会直接导致默认值失效
• 组件导出时不要用额外的包装（比如高阶组件），否则可能干扰defaultProps的识别

相比之下，参数默认值是JavaScript原生特性，写法更直观，也不用额外维护defaultProps属性，后续组件维护更省心。

内容的提问来源于stack exchange，提问作者M.A.Asardeen