React向props传递函数，组件内调用时报props.prop1不是函数怎么解决

错误原因 #

你两次调用Test组件传入的props不匹配：

• 第一次调用<Test prop1={() => {return "a"}}/>时，仅传入了prop1，没有传入prop2
• 第二次调用<Test prop2="b"/>时，仅传入了prop2，没有传入prop1

而Test组件内部默认每次渲染都会执行props.prop1()，当第二次渲染组件时，prop1的值为undefined，调用undefined自然会抛出props.prop1 is not a function的错误。

解决方案 #

你可以根据业务需求选择以下任意一种方案修复：

• 方案1：使用可选链调用可选props，避免未传props时的调用报错
  调用prop1前先判断它是否存在，用可选链语法?.即可实现，不需要额外写条件判断：

// 修改后的Test组件核心代码
function Test(props) {
  return (
    <>
      <div className="test">
        <div>Test data {props.prop1?.()} </div>
        {/* prop2也可以加空值合并运算符兜底未传的情况 */}
        <div>{props.prop2 ?? ''}</div>
      </div>
    </>
  );
}

• 方案2：给Test组件设置默认props兜底
  如果要保证props无论是否传入都有合法值，可以给组件配置默认props：

// 在Test.js文件末尾导出前添加以下代码
Test.defaultProps = {
  // prop1默认是返回空字符串的函数
  prop1: () => '',
  // prop2默认是空字符串
  prop2: ''
}

• 方案3：保证每次调用Test组件时都传入完整的必填props
  如果你的业务逻辑要求prop1和prop2都是必填项，那每次调用Test时都要把两个参数传齐：

// 修改App.js内的Test调用逻辑
<Test prop1={() => {return "a"}} prop2="第一次自定义内容"/>
<Test prop1={() => {return "其他返回值"}} prop2="b"/>

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