如果我想存储对象数组，如何定义 useState 钩子所期望的类型?

Question

我正在尝试使用useState钩子存储对象数组，但无法获得描述它所期望类型的语法。我想存储的类型是Array<Updates>.

这是我的代码：

const [messages, setMessages] = useState<any>([]);

更新

我选择映射Updates数组，现在想存储每个Update这是一个普通对象，但Argument of type '{}' is not assignable to parameter of type 'Update | (() => Update)'.收到以下代码的错误：

const [messages, setMessages] = useState<Update>({}); // object in brackets is underlined with the error.

Answer 1

您收到此错误是因为{}没有Update。如果我理解正确，您希望更新为空。

这样的东西应该适合你：

const [messages, setMessages] = useState<Update | null>(null);

这意味着messages(顺便说一句，您可能应该将其重命名为update以获得更好的可读性(可以是 null 或Update类型的对象。

如果您尝试在没有空检查的情况下使用它，这将产生错误。

类似于messages.name的内容将导致消息可能为 null 的错误。

您可以通过编写类似const name = messages && messages.name或简单的 if 语句来修复它。

if (messsages)
// do something here
const name = messages.name;
}

如果您在尝试访问消息时 100% 该消息永远不会为空，则可以使用以下!将其解包：const name = messasges!.name;

Answer 2

您当前将组件状态定义为单个 Update 对象，但您需要将其定义为这些对象的数组：

const [messages, setMessages] = useState<Update[]>([]);

稍后当您需要替换数组中的特定项目时，您可以这样做：

var message = messages[3]; // lets say you want to change name of forth message
Object.assign([], messages, { 3: { ...message, name: 'New Name' } });
setMessages(messages);