React遍历Map结构JSON报错：对象无法作为React子元素

错误原因 #

你遇到的报错是因为content_module和auth_module都是对象类型，React无法直接将对象作为子元素渲染；同时你把状态初始值设为数组[]，但实际存入的是对象，也会导致类型不一致的问题。

修复步骤 #

1. 修正状态初始值
   将contentModules和authModules的初始值从数组改为空对象，匹配实际存储的数据类型：

   const [contentModules, setContentModules] = useState({});
   const [authModules, setAuthModules] = useState({});
   

2. 正确遍历对象数据
   使用Object.entries()方法将对象转换为键值对数组，再通过map遍历渲染。该方法返回形如[["键名", "对应值"], ...]的数组，方便解构处理每个provider及其对应的用户列表。

完整示例代码 #

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const UserProviderList = () => {
  const [contentModules, setContentModules] = useState({});
  const [authModules, setAuthModules] = useState({});

  useEffect(() => {
    axios.get('http://localhost:8080/usuarios/filtrados')
      .then(res => {
        setContentModules(res.data.content_module);
        setAuthModules(res.data.auth_module);
      })
      .catch(err => {
        console.log(err);
      });
  }, []);

  return (
    <div>
      <h2>Content Modules</h2>
      {/* 遍历contentModules对象 */}
      {Object.entries(contentModules).map(([providerName, users]) => (
        <div key={providerName}>
          <h3>{providerName}</h3>
          <ul>
            {users.map(user => (
              <li key={user}>{user}</li>
            ))}
          </ul>
        </div>
      ))}

      <h2>Auth Modules</h2>
      {/* 遍历authModules对象 */}
      {Object.entries(authModules).map(([providerName, users]) => (
        <div key={providerName}>
          <h3>{providerName}</h3>
          <ul>
            {users.map(user => (
              <li key={user}>{user}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};

export default UserProviderList;

关键说明 #

• Object.entries(obj)：将对象的键值对转为数组，解决对象无法直接遍历渲染的问题。
• 所有遍历的元素都需要设置唯一的key属性，React通过它追踪列表元素变化，提升渲染性能。
• 采用逐层渲染的方式：先遍历provider层级，再遍历每个provider下的用户列表，还原数据的嵌套结构。

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