React渲染用户邮箱时遇Objects are not valid as a React child错误求助

问题情况 #

想渲染API返回的所有用户邮箱用于测试，尝试用dataFromApi.map((item, i) => {item.email})但没成功，出现错误：

react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: object with keys {id, email, password}). If you meant to render a collection of children, use an array instead.

错误原因 #

1. State赋值错误：API返回的是用户数组，但你用setDataFromApi(data[0])只把第一个用户对象存进了state，导致state变成单个对象，没法用map遍历。
2. 直接渲染对象：你在<p>标签里直接写{dataFromApi}，React不能直接渲染对象，这是触发报错的直接原因。

修复步骤 #

1. 修正State赋值 #

把setDataFromApi(data[0])改成setDataFromApi(data)，让state保存完整的用户数组：

.then( (data) => {
  setDataFromApi(data); // 去掉[0]，保存整个数组
})

2. 正确渲染邮箱列表 #

替换掉<p>{dataFromApi}</p>，用map遍历数组渲染每个邮箱，注意加key属性，同时处理邮箱为null的情况：

<div className="email-list">
  {dataFromApi.map((item, i) => (
    <p key={i}>{item.email || '无邮箱'}</p>
  ))}
</div>

完整修复后的代码示例 #

import { useState } from 'react';

const Login = () => {
  const [dataFromApi, setDataFromApi] = useState([]);

  const URL = 'http://localhost:5000/users'
  const requestOptions = {
    method: 'GET',
    headers: { 
        'Content-Type': 'application/json'
    },
  }   
  const submit = () => {
    fetch(URL, requestOptions)
      .then( (userdata) => userdata.json())
      .then( (data) => {
        setDataFromApi(data); // 保存完整数组
      })
      .catch( (err) => {
        console.log(err);
      })
  }

  return (
      <div className="login">
        <h1 className="loginTitle">Choose a Login Method</h1>
        {/* 渲染邮箱列表 */}
        <div className="email-list">
          {dataFromApi.map((item, i) => (
            <p key={i}>{item.email || '无邮箱'}</p>
          ))}
        </div>
        <div className="wrapper">
          {/* 原有的其他代码 */}
        </div>
      </div>
  )
}

export default Login;

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