TypeScript：无法调用可能是“未定义”的对象答案

【问题标题】：TypeScript: Cannot invoke an object which is possibly 'undefined'TypeScript：无法调用可能是“未定义”的对象
【发布时间】：2020-08-19 10:55:47
【问题描述】：

我有一个可重用的组件，它接受可选的 onClick 回调函数作为道具。

我将 Props 接口定义如下：

interface Props {
  prop1: string;
  prop2: string;
  optionalClickFn?: () => void;
}

函数式 React (JSX) 组件如下：

const ExampleComponent = (props: Props) => {
    return{
        { props.optionalClickFn ? <div
          className="delete-btn"
          onClick={() => props.optionalClickFn()}
        >
          <FontAwesomeIcon icon={faTimesCircle} color="red" />
        </div> : <div></div>}
         }
}

我已经定义了一个可选的 prop 'optionalClickFn'，因此我在执行函数之前首先检查它是否存在。但是，我仍然收到错误：无法调用可能是“未定义”的对象。

【问题讨论】：

没错，根据你的 prop 定义，它可能是未定义的。如果该道具未定义，您希望组件做什么？

标签： javascript reactjs typescript

【解决方案1】：

我找到了解决方案。以这种方式进行检查是行不通的。如果我在 onClick 道具中放置另一个 if 条件，它会按预期工作。

  {props.optionalClickFn ? (
    <div
      className="delete-btn"
      onClick={() => {
        if (props.optionalClickFn) {
          return props.optionalClickFn();
        }
      }}
    >
      <FontAwesomeIcon icon={faTimesCircle} color="red" />
    </div>
  ) : <div></div>}

我仍然不确定为什么它不像我在原始问题中写的那样工作。

【讨论】：