将获取的数据传递给响应组件

Question

我正在使用getServerSideProps在服务器端获取数据。数据获取工作正常。我想将获取的数据传递给一个名为UserForm的组件。这是我的代码

// This gets called on every request
export async function getServerSideProps(context) {
// Fetch data from external API
const { id } = context.query;
const res = await fetch(`http://localhost:3001/v1/firm/${id}`)
const data = await res.json()
// Pass data to the page via props
return { props: { data } }
}
function ComingSoon({ data }) {
const router = useRouter()
const { id } = router.query
return (
<div className="coming-soon-area">
<TopHeader />
<NavbarStyleFive />
<UserForm data = {data}/>
<Footer />
</div>
)
}
export default ComingSoon;

这是UserForm 的内容

import React from 'react';
const UserForm = (data) => {
return (
<div className="coming-soon-area">
<h2>{data[0].name} coming soon</h2>
</div>
)
}
export default UsernForm;

我得到一个错误在UserForm告诉我，数据是未定义的。对这个问题有什么想法吗?

编辑:数据不是未定义的，这段代码运行良好。我认为问题是访问数据道具在UserForm

<div className="coming-soon-area">
<TopHeader />
<NavbarStyleFive />
<h2>{data[0].name} coming soon</h2>
<Footer />
</div>

Answer 1

考虑到来自api的data是异步的，React可以尝试在data可用之前渲染UserForm。为了避免这种情况，您可以像这样修改UserForm:

import React from 'react';
const UserForm = ({ data }) => {
return (
<div className="coming-soon-area">
{data && data.length > 0 && <h2>{data[0].name} sofort kündigen</h2>}
</div>
)
}
export default UsernForm;

这样，只有当data有效且不为空时，data[0].name才会显示。

Answer 2

始终考虑在访问数据之前检查获取的数据。data最初是undefined，即初始mount。而且，当不期望undefined、空或null值时，您有很多方法可以防止这种情况发生。您可以使用条件语句，甚至可选的链接