将获取的数据传递给反应组件答案

【问题标题】：Pass fetched data to react component将获取的数据传递给反应组件
【发布时间】：2021-03-09 09:20:19
【问题描述】：

我正在使用 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;

这是用户窗体的内容

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 中的数据道具

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

【问题讨论】：

标签： reactjs next.js

【解决方案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。

【讨论】：

应用程序不再崩溃，但不幸的是 data[0].name 从未显示，因此组件上的 data 值似乎始终为空。
并且api调用是在服务端完成的，所以数据显示给用户时不能为空；）
很遗憾我看不到data 的形状。但试试data.data 之类的东西（通常是这样的......）。
如果我从“const UserForm = (data) => {”中删除数据，则数据未定义。所以我认为我在 UserForm 中以错误的方式访问数据
是的，我也是这么想的。你能告诉我dataconsole.log 吗？

【解决方案2】：

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

【讨论】：