如何修复 TypeScript 和 React 中禁止的非空断言？

Question

我有如下代码：

type ItemProps = {
    status?: string;
}

<Items status={status!} /> // error here: warning  Forbidden non-null assertion
                           //                   @typescript-eslint/no-non-null-

断言

我收到禁止的非空断言错误。

我该如何修复这个错误？

我努力了

<Items status={status && status}/>

但这似乎不正确。

Answer 1

为什么要使用“非空断言运算符”？

该status属性可以是string | undefined. 当您不想指定 的值时，传递空字符串或分配默认值怎么样status？

<Items status={status || ''}/>

或者：

type ItemProps = {
  status?: string;
};

const Items: React.FC<ItemProps> = ({ status = 'statusDefaultValue' }) => <div>Some JSX</div>

在不了解上下文的情况下，我很难理解你的情况。希望这能有所帮助。