Question

我正在尝试学习如何在应用程序中使用react-hook-form。

我有一个带有很多输入的表格。

我有一个updateData函数，该函数应该捕获和存储输入，但似乎无法正常工作。每次我要呈现表单时，如果我在多步骤表单中返回上一步，如果我不重新输入表单输入，似乎会抛出错误。

在渲染页面上，我使用：

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

TypeError：无法读取未定义的属性“ map”。

如果我每次渲染表单输出页面时都没有填写预注册表单字段，则会引发错误，表明无法读取未定义的地图。

如果只能找到输出，如何渲染输出？在这种情况下，宁愿有一个空白的未完成句子而不是错误消息？

此post建议使用默认值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>}

使用react-hook-form进行React-在没有可用数据时呈现输出-错误映射未定义

1 个答案: