React中使用Card组件渲染列表出现[object Object]问题如何解决

DevOps 小满

2026-8-30

问题根因

你遇到的[object Object]渲染问题来自几个核心错误：

JSX 语法编译后本质是返回描述UI的普通JavaScript对象，并非HTML字符串。直接把JSX对象拼接到innerHTML属性时，JS会自动调用对象的toString()方法，最终输出的就是[object Object]字符串。
手动通过document.getElementById操作DOM修改内容的写法，完全脱离React的渲染生命周期，Card组件不会被React正常挂载、解析和渲染。
字段名不匹配：对比接口返回的JSON结构，你代码里写的item.imagePath、item.tag实际对应接口字段是itemImagePath、tags（且tags是数组类型，直接渲染会报错）。
额外问题：fetch请求直接写在组件函数体中，每次组件重渲染都会重复触发请求，导致性能浪费和重复渲染。

正确实现方案

React是声明式、数据驱动视图的框架，你只需要维护列表对应的状态，在JSX中遍历状态渲染Card组件即可，完全不需要手动操作DOM修改innerHTML。
完整可运行代码如下：

import { useState, useEffect } from 'react';
// 按你项目实际路径引入Card组件，以下为react-bootstrap的引入示例
import Card from 'react-bootstrap/Card';

const ItemList = () => {
  // 定义状态存储接口返回的列表数据，初始值为空数组
  const [itemList, setItemList] = useState([]);

  // 接口请求属于副作用，放在useEffect中，仅组件首次挂载时执行
  useEffect(() => {
    const getList = async () => {
      const res = await fetch('http://localhost:3001/api/itemList/', {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json",
        },
        body: JSON.stringify({
          userId: localStorage.getItem("userId"),
        })
      });
      const listData = await res.json();
      // 更新状态，自动触发组件重渲染
      setItemList(listData);
    };
    getList();
  }, []);

  return (
    <div id="cards" className="d-flex flex-wrap gap-3">
      {/* 遍历列表状态，直接渲染Card组件 */}
      {itemList.map(item => (
        <Card key={item.id} style={{ width: '18rem' }}>
          <Card.Img variant="top" src={item.itemImagePath} alt={item.itemName} />
          <Card.Body>
            <Card.Title>{item.itemName}</Card.Title>
            <Card.Text>
              {/* tags是数组，按需拼接为字符串渲染 */}
              {item.tags?.join(' / ')}
            </Card.Text>
          </Card.Body>
        </Card>
      ))}
    </div>
  )
}

export default ItemList;

关键规则

在React组件中，优先通过状态驱动视图更新，禁止直接操作原生DOM修改页面内容。
JSX只能在React的渲染上下文中使用，不能作为普通字符串赋值给原生DOM的innerHTML等属性。
遍历渲染列表项时，必须给每一项设置唯一的key属性（优先用接口返回的唯一id），保证React渲染diff逻辑正常。
渲染前先核对接口返回的字段名、字段类型，避免因字段不匹配导致渲染异常。

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