基于Fetch数据生成React Bootstrap Cards遇报错，求解决方法

你遇到的错误根源在于：React组件（包括React Bootstrap的<Card>）是虚拟DOM元素，不是原生DOM节点，不能用appendChild这类原生DOM操作API来添加。React的核心是状态驱动渲染，正确的做法是通过维护数据状态，用JSX遍历数据生成组件。

正确实现步骤 #

1. 用状态管理数据：通过React的useState存储从Fetch获取到的数据。
2. JSX遍历生成卡片：利用数组的map方法，配合Bootstrap的Container/Row/Col布局，批量生成卡片组件。

完整代码示例 #

// 导入所需的React和React Bootstrap组件
import { useState, useEffect } from 'react';
import { Container, Row, Col, Card, CardLink } from 'react-bootstrap';

export default function TrackCardGrid() {
  // 初始化数据状态
  const [trackData, setTrackData] = useState([]);

  // 组件挂载时发起Fetch请求
  useEffect(() => {
    fetch('你的数据接口地址')
      .then(response => response.json())
      .then(data => {
        // 获取数据后更新状态，触发组件重新渲染
        setTrackData(data);
      })
      .catch(error => console.log('数据请求失败:', error));
  }, []);

  return (
    <Container className="py-4">
      {/* 配置网格响应式布局：小屏1列，中屏2列，大屏3列 */}
      <Row xs={1} md={2} lg={3} className="g-4">
        {/* 遍历数据生成卡片 */}
        {trackData.map(track => (
          <Col key={track.id}>
            <Card>
              <Card.Body>
                <Card.Title>{track.title}</Card.Title>
                <Card.Subtitle className="mb-2 text-muted">{track.artist}</Card.Subtitle>
                <Card.Text>
                  年份：{track.year}<br />
                  流派：{track.genre}<br />
                  标签：{track.tags}
                </Card.Text>
                <CardLink href={track.url}>访问链接</CardLink>
              </Card.Body>
            </Card>
          </Col>
        ))}
      </Row>
    </Container>
  );
}

关键说明 #

• 状态驱动：当trackData状态更新时，React会自动重新渲染组件，生成对应的卡片，完全不需要手动操作DOM。
• key属性：遍历生成的每个组件必须加唯一的key（这里用track.id），帮助React识别组件的变化，提升渲染性能。
• 响应式布局：Row的xs/md/lg属性控制不同屏幕尺寸下的列数，g-4设置卡片间距，直接复用Bootstrap的网格系统。

对比你之前的原生DOM操作，这种方式完全符合React的设计逻辑，不会出现类型不匹配的错误。

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