React TypeScript传递状态设置器为props时出现undefined调用错误如何解决

报错原因 #

你将setRefresh定义为接口IChart的可选属性，TypeScript会默认该属性可能为undefined，直接调用会触发类型校验报错。

解决方案（均保留可选性、无需使用any） #

方案1：使用可选链调用（最简洁） #

调用属性前加?.可选链运算符，TypeScript会自动判断setRefresh存在时才执行调用，不会触发报错。
修改子组件的handleRefresh逻辑即可：

const handleRefresh = () => {
  setRefresh?.(false);
}

适用场景：父组件不传setRefresh时，不执行该逻辑也不会影响业务的情况。

方案2：给属性设置默认空函数 #

解构props时给setRefresh设置默认的空函数，保证该属性永远不会为undefined，后续可以直接调用。
修改子组件的props解构逻辑：

const Chart: React.FunctionComponent<IChart> = ({refreshChart, setRefresh = () => {}}) => {
  // 后续直接正常调用即可，不需要额外判断
  const handleRefresh = () => {
    setRefresh(false);
  }
}

适用场景：就算父组件不传setRefresh，调用该方法也不需要做额外异常处理的情况。

方案3：调用前做存在性判断 #

调用前先判断setRefresh是否存在，再执行调用逻辑，还可以自定义属性不存在时的兜底逻辑。
修改handleRefresh逻辑：

const handleRefresh = () => {
  if (setRefresh) {
    setRefresh(false);
  } else {
    // 这里可以加自定义兜底逻辑，比如控制台提示、执行其他操作等
  }
}

适用场景：需要在setRefresh未传递时执行额外业务逻辑的情况。

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