传递未定义到React setState是错误的吗?

Question

假设我在React组件上声明了以下状态:

const [selectedUsers, setSelectedUsers] = useState<IUser['id'][]>();

上述状态用作第三方HTML<select />(Ant Design)的值。

使用完<select />后，我想清除它，这很容易通过将值设置为null或undefined来实现。

例如:

setSelectedUsers(null);

<select value={selectedUsers} /> // Is now null, no option is selected

然而，我不能传递null作为<select />的值，由于预期的TS道具上的选择组件，因为它期望接收<IUser['id'][] | undefined>。

即:

Type 'null' is not assignable to type 'string[] | undefined'.

给定上面的上下文，传递undefined到React状态有任何问题吗?

即:

setSelectedUsers(undefined);

这是一个关于最佳实践的问题，因为如果我使用undefined而不是null，上面的代码就可以完美地工作。

Answer 1

将undefined作为值传递给setState是完全可以的。状态的值，在你的例子中是selectedUsers，可以是任何JavaScript类型。

undefined是一个"原始值"。在JavaScript中，因此是一个常规类型。在这里找到更多关于JavaScript类型的信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#javascript_types

Answer 2

直接传递[] as string[]

setSelectedUsers([] as string[]);

应该可以了。

编辑，包括在评论的东西:

你的类型是一个单元素数组，这应该定义为:

const [selectedUsers, setSelectedUsers] = useState<string[]>();

那么，上面的解决方案就有效了。

Answer 3

类型和构造函数应为

const [selectedUsers, setSelectedUsers] = useState<[IUser['id']] | null>(null);

如果您希望null为空值。(undefined隐式工作，因为你不传递初始状态，因为这是隐式undefined。)

但是，如果您希望能够选择多个值，您可能会寻找

const [selectedUsers, setSelectedUsers] = useState<Array<IUser['id']> | null>(null);