React卡片组件渲染失败，如何正确传递嵌套JSON对象给组件？

你的代码存在几个关键问题，导致无法正常渲染，以下是具体问题和修正方式：

1. map方法语法错误 #

在return语句里，你写了{stories,map(...)}，这里的逗号是错误的，应该是stories.map(...)，而且不需要用大括号包裹整个map结果（return直接返回JSX元素数组即可）。

错误代码片段：

return({stories,map((story, index) => { ... })});

修正后写法：

return (
  stories.map((story, index) => {
    // 渲染逻辑
  })
);

2. 组件职责混乱 #

你现在在Card组件内部定义了stories数组，又在Home里三次调用<Card />，这会导致页面渲染3组完全相同的两个故事卡片，而不是所有故事各渲染一次。正确的做法是拆分组件：

• 一个负责遍历故事列表的组件（比如CardList）
• 一个负责渲染单个故事的Card组件

3. 内容渲染错误 #

你用<h2>标签展示描述，且文本标注为country:，但实际对应的数据是desc（描述），同时遗漏了需求中的grade（难度）字段渲染。

修正后的完整代码示例 #

1. 单个故事的Card组件（Card.js） #

import React from 'react';

class Card extends React.Component {
  render() {
    const { story } = this.props;
    return (
      <div>
        <h2>{story.title}</h2>
        <p>描述：{story.desc}</p>
        <p>难度：{story.grade}</p>
        <hr />
      </div>
    );
  }
}

export default Card;

2. 故事列表组件（CardList.js） #

import React from 'react';
import Card from './Card';

class CardList extends React.Component {
  render() {
    const stories = [
      {
        id: 1,
        title: 'First black story',
        desc: 'Can you solve this hard puzzle?',
        grade: 'Hard'
      },
      {
        id: 2,
        title: 'Second black story',
        desc: 'This should be easy for you!',
        grade: 'Makkelijk'
      }
    ];

    return (
      <div id="cardsOverview">
        {stories.map(story => (
          <Card key={story.id} story={story} />
        ))}
      </div>
    );
  }
}

export default CardList;

3. 在Home.js中调用 #

import React from 'react';
import CardList from './CardList';

class Home extends React.Component {
  render() {
    return (
      <div>
        <CardList />
      </div>
    );
  }
}

export default Home;

额外说明 #

• 尽量用数据的id作为key，而非index，这样在数组元素顺序变化时，React能更高效地更新DOM。
• 拆分组件后，代码职责更清晰，单个Card组件可复用在其他需要展示单条故事的场景。

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