Question

我正在使用带有React的打字稿，但出现此错误。

Cannot invoke an object which is possibly 'undefined'.ts(2722)
const onChange: ((...args: any[]) => any) | undefined

这是我得到错误的代码。

interface FilterGroupsProps {
  data?: any[];
  selectedGroups?: any[];
  onChange?: (...args: any[]) => any;
}

// Inside the class
  onClick = (groupName: string) => (event: MouseEvent<HTMLButtonElement>) => {
    const { onChange } = this.props;
    event.preventDefault();
    onChange(groupName);
  };

//Inside the render:
          {allUniqueGroups.map((group: string) => (
            <a
              key={group}
              className="dropdown-item d-flex justify-content-between align-items-center"
              href="#"
              onClick={this.onClick(group)}
            >

对于此错误，我不理解的是：呈现此onClick时，groupName应该可用。

这意味着我对应该处理我的安全案件感到困惑。您能在这里解释问题吗？以及为我提供解决此问题的方法。

Answer 1

看看FilterGroupsProps：

interface FilterGroupsProps {
  data?: any[];
  selectedGroups?: any[];
  onChange?: (...args: any[]) => any;
}

onChange可能是undefined或provided。

我的方法：

onClick = (groupName: string) => (event: MouseEvent<HTMLButtonElement>) => {
  if (this.props.onChange) {
   const { onChange } = this.props;
   event.preventDefault();
   onChange(groupName);
  }
  // or do something else...
};

或 Randy 的注释解决方案，从optional方法中删除onChange flag ：

interface FilterGroupsProps {
  data?: any[];
  selectedGroups?: any[];
  onChange: (...args: any[]) => any;
}

无法调用可能无法定义的对象

1 个答案: