使用数组.map方法渲染模板卡片时无法正确获取fetch返回的嵌套对象数据

1. 模板直接渲染对象导致报错 #

你当前模板中直接写了{user.company}，而company是包含name、catchPhrase等属性的对象，React不允许直接把对象作为子元素渲染，会抛出错误导致页面渲染失败。
请修改为访问对象下的具体属性，修正后的模板如下：

const renderUser = (user, index) => {
        return(
            <div className="user-card" key={"user-" + index}>
            <header>
                <h2>{user.name}</h2>
            </header>
            <section className="company-info">
                <p><b>Contact:</b>{user.email}</p>
                <p><b>Works for:</b>{user.company.name}</p>
                <p><b>Company creed:</b>{user.company.catchPhrase}</p>
            </section>
            <footer>
                <button className="load-posts">POSTS BY {user.username}</button>
                <button className="load-albums">ALBUMS BY {user.username}</button> 
            </footer>
        </div>
        )
    };

2. 异步fetch数据的渲染时序问题 #

如果你是通过fetch接口获取的dataArr，要注意fetch是异步操作，初始渲染时dataArr可能是空数组/undefined，需要做适配处理：

• 如果是React项目，将dataArr存在state中，fetch成功后调用setState更新状态，即可触发重新渲染
• 可添加可选链操作符避免访问undefined属性报错：user?.name、user?.company?.name

3. 确保map返回结果被正确插入渲染树 #

dataArr.map(renderUser)会返回一个JSX元素数组，你需要把这个数组放到要渲染的容器节点中，比如React组件的return语句内：

function UserList() {
  const [dataArr, setDataArr] = useState([])
  
  // fetch数据示例
  useEffect(() => {
    fetch('你的接口地址')
      .then(res => res.json())
      .then(data => setDataArr(data))
  }, [])

  return (
    <div className="user-list-container">
      {/* 将map返回的元素数组放在此处才会被正常渲染 */}
      {dataArr.map(renderUser)}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者tpadilla10117