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

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: Cannot read property 'map' of undefined.

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

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

这表明默认值 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 using react-hook-form - rendering output when no data is available - error map undefined

javascript

reactjs

react-hooks

react-hook-form