ReactJS中如何将数组存入组件状态？渲染报错怎么解决？

嘿，这个问题我之前也碰到过！咱们先搞清楚错误的核心原因：你直接把包含对象的数组this.state.list_ratings放到<p>标签里渲染，React没办法直接解析这些带键值对的对象——它只认识字符串、数字或者合法的React元素，所以才会抛出那个提示。

你的状态初始化和赋值逻辑都是没问题的，问题完全出在渲染环节。你需要遍历这个数组，把每个对象转换成React能识别的可渲染内容，这里用数组的map()方法就能搞定：

// 替换原来的 <p>{this.state.list_ratings}</p>
<div className="ratings-container">
  {this.state.list_ratings.map((rating, index) => (
    <p key={index}>
      <strong>{rating.Source}:</strong> {rating.Value}/10
    </p>
  ))}
</div>

几个关键细节要注意： #

• 每个通过map生成的元素都需要唯一的key属性，React靠它追踪列表元素的变化，避免不必要的重渲染。这里我用了数组索引index当key，如果你的Source字段（比如"IMDB"、"GDN"）都是唯一的，用rating.Source会更稳妥（比如key={rating.Source}）。
• 我们把对象里的Source和Value拆出来，组合成可读的文本结构，这样React就能正确渲染每一条评分内容了。

如果想让展示样式更规整，也可以用列表标签来实现：

<ul className="ratings-list">
  {this.state.list_ratings.map((rating) => (
    <li key={rating.Source}>
      {rating.Source} 评分：{rating.Value}
    </li>
  ))}
</ul>

这样修改后，你就能正常看到所有评分的展示，不会再出现那个恼人的错误啦！

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