Question

这可能是以前被问到的（如果真，请告诉我），但是我一直在尝试用&&检查它的存在之后调用一个函数

interface IProps {
    primaryAction?: () => void;
}    
    
const Comp: React.FC<IProps> = (props) => {
  return (
    <div>
      {props.primaryAction && (
        <Button onClick={() => props.primaryAction()}>
          Click
        </Button>
      )}
    </div>
    );
};

TS编译器抱怨：

无法调用可能是“未定义”的对象。

有什么办法可以解决这个问题？

Answer 1

您没有 not 在使用它的同一范围内进行检查。从理论上讲，MyAccordion可以在函数运行时更改其内容。

将此（可怕的）代码添加到渲染函数中，单击时将出现运行时错误：

props

这是打字稿保护您免受该错误的错误。就是说，使用该值不能保证您的非null检查仍然有效。

这就是为什么通常建议在功能组件中解构道具：

setTimeout(() => props.primaryAction = undefined, 100)

现在，您可以对该值进行 direct 引用，并且您知道它无法更改，因为在没有打字稿通知的情况下，外部代码都不会影响分配的值，因为这必须在此函数内发生

Playground

与&&检查后，无法调用可能未定义的对象

1 个答案: