React使用React钩子形式-在没有可用数据时呈现输出-错误映射未定义

Question

我正在尝试学习如何在我的应用程序中使用react hook表单。

我有一个表格，里面有很多输入。

我有一个updateData函数，它应该用来捕获和存储输入，但它似乎不起作用。每次我想呈现表单时，如果我在多步表单中返回一步，如果我不重新输入表单输入，它似乎会抛出并出错。

在我的渲染页面上，我使用：

{state.data.title}
{state.data.PreregistrationEntities.map(PreregistrationEntities => <Paragraph><Text>This will be registered with {PreregistrationEntities.label}.</Text></Paragraph>)}

TypeError:无法读取未定义的属性"map"。

如果我每次呈现表单输出页面时都不填写预注册表单字段，它会抛出一个错误，说它无法读取未定义的映射。

如果只能找到输出，如何呈现输出？在这种情况下，我宁愿有一个空白的未完成的句子，也不愿有一条错误信息？

这篇文章表明，默认值nil可能会有所帮助。在我回到所有表单输入并开始将其定义为空白之前，还有其他解决方案吗？

Answer 1

如果不存在，您可以添加一个不渲染的复选框：

{state.data.title}
{state.data.PreregistrationEntities && state.data.PreregistrationEntities.map(PreregistrationEntities => <Paragraph><Text>This will be registered with {PreregistrationEntities.label}.</Text></Paragraph>)}

更完整的解决方案是在不存在的情况下添加一条消息

{state.data.title}
{state.data.PreregistrationEntities ?
state.data.PreregistrationEntities.map(PreregistrationEntities => <Paragraph><Text>This will be registered with {PreregistrationEntities.label}.</Text></Paragraph>)
: <Text>PreregistrationEntities does not exist</Text>}