Next.js使用.map()渲染JSON数据到自定义组件报错求助

问题描述 #

我是Next.js新手，尝试从JSON文件中获取对象数据并渲染到自定义React组件中。已正确导入JSON文件，但在使用.map()方法渲染JSON对象列表时出现错误，提示“Objects are not valid as a React child”，不清楚问题所在，相关信息如下：

JSON文件内容 #

[{"id":1,"avatar":"https://randomuser.me/api/portraits/men/1.jpg","nom":"Rafaly Georges","mail":"mail@mail.com","dept":"Logistique","status":"active"},{"id":2,"avatar":"https://randomuser.me/api/portraits/men/1.jpg","nom":"Rajean Paul","mail":"mail@mail.com","dept":"Infrastructure","status":"active"},{"id":3,"avatar":"https://randomuser.me/api/portraits/women/1.jpg","nom":"Belmondique","mail":"mail@mail.com","dept":"Logistique","status":"active"}]

React代码 #

import React from 'react';
import { BiTrashAlt,BiEdit } from 'react-icons/bi';
import data from '../../database/data.json';

export default function UserTableList() {
  return (
    <table className="min-w-full table-auto mx-auto ">
    <thead>
      <tr className="bg-gray-800">
        <th className="px-16 py-2">
          <span className="text-gray-200">Nom</span>
        </th>
        <th className="px-16 py-2">
          <span className="text-gray-200">Email</span>
        </th>

        <th className="px-16 py-2">
          <span className="text-gray-200">Departement/Titre</span>
        </th>

        <th className="px-16 py-2">
          <span className="text-gray-200">Activité</span>
        </th>

        <th className="px-16 py-2">
          <span className="text-gray-200">Action</span>
        </th>
      </tr>
    </thead>
    <tbody className="bg-gray-200">

      {
         data.map(data=>{
          return(
            <Tr key={data.id} id={data.id} nom={data.nom} avatar={data.avatar} mail={data.mail} dept={data.dept} status={data.status}></Tr>
          )
        })
     
      }
    </tbody>
  </table>
  )
}

function Tr(id, nom, avatar, mail,dept, status){
  return(
    <tr className="bg-gray-50 text-center">
    <td className="px-16 py-2">
      <img src={avatar||'#'} alt="" />
      <span>{nom||'inconu'}</span>
    </td>
    <td className="px-16 py-2  ">
      <span>{mail||'inconu'}</span>
    </td>
    <td className="px-16 py-2 ">
      <span>{dept||'inconu'}</span>
    </td>
    <td className="px-16 py-2 ">
      <button className="cursor">
        <span className="bg-green-500 text-white px-5 py-1 rounded-full">
        {status||'indéfini'}
        </span>
      </button>
    </td>
    <td className="px-16 py-2  flex justify-around gap-5 items-center">
      <button className="cursor">
        <BiEdit size={25} color="gray"></BiEdit>
      </button>
      <button className="cursor">
        <BiTrashAlt size={25} color="red"></BiTrashAlt>
      </button>
    </td>
  </tr>
  );
}

错误信息 #

Server Error
Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
renderNodeDestructiveImpl
file:///C:/Users/Arotiana's/intravak/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6179:11)

我原以为使用.map()处理JSON对象会返回数组，对此感到困惑，希望得到帮助。

解决方案 #

错误的核心原因是自定义Tr组件的参数接收方式错误：React组件的所有props会被打包成一个单一对象传入组件，而不是作为独立参数传递。你当前的写法会导致第一个参数id实际上是整个props对象，后续参数都是undefined，最终在渲染时把这个对象当作React子元素，触发报错。

修复步骤很简单，修改Tr组件的参数接收逻辑：

方法1：解构props对象 #

直接在组件参数中解构需要的props：

function Tr({ id, nom, avatar, mail, dept, status }){
  return(
    <tr className="bg-gray-50 text-center">
    <td className="px-16 py-2">
      <img src={avatar||'#'} alt="" />
      <span>{nom||'inconu'}</span>
    </td>
    <td className="px-16 py-2  ">
      <span>{mail||'inconu'}</span>
    </td>
    <td className="px-16 py-2 ">
      <span>{dept||'inconu'}</span>
    </td>
    <td className="px-16 py-2 ">
      <button className="cursor">
        <span className="bg-green-500 text-white px-5 py-1 rounded-full">
        {status||'indéfini'}
        </span>
      </button>
    </td>
    <td className="px-16 py-2  flex justify-around gap-5 items-center">
      <button className="cursor">
        <BiEdit size={25} color="gray"></BiEdit>
      </button>
      <button className="cursor">
        <BiTrashAlt size={25} color="red"></BiTrashAlt>
      </button>
    </td>
  </tr>
  );
}

方法2：通过props对象访问属性 #

如果不想解构，可以保留单个props参数，然后通过props.xxx访问：

function Tr(props){
  return(
    <tr className="bg-gray-50 text-center">
    <td className="px-16 py-2">
      <img src={props.avatar||'#'} alt="" />
      <span>{props.nom||'inconu'}</span>
    </td>
    <td className="px-16 py-2  ">
      <span>{props.mail||'inconu'}</span>
    </td>
    <td className="px-16 py-2 ">
      <span>{props.dept||'inconu'}</span>
    </td>
    <td className="px-16 py-2 ">
      <button className="cursor">
        <span className="bg-green-500 text-white px-5 py-1 rounded-full">
        {props.status||'indéfini'}
        </span>
      </button>
    </td>
    <td className="px-16 py-2  flex justify-around gap-5 items-center">
      <button className="cursor">
        <BiEdit size={25} color="gray"></BiEdit>
      </button>
      <button className="cursor">
        <BiTrashAlt size={25} color="red"></BiTrashAlt>
      </button>
    </td>
  </tr>
  );
}

修改后，.map()方法返回的组件就能正确接收并渲染props数据，不会再出现对象作为React子元素的错误。

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