React渲染ratings数组报错：对象无法作为React子元素求助

问题根源 #

你控制台打印的props.ratings是数组，但渲染时报错，大概率是组件初始渲染时props.ratings不是数组（比如异步获取数据前，它的初始值是{}而非[]），或者数据传递过程中被意外改成了单个对象。React无法直接渲染对象，因此抛出这个错误。

修复方案 #

方案1：给props.ratings设置数组默认值 #

在解构props时直接兜底，确保它始终是数组类型：

const { ratings = [] } = props;

return (
  <>
    {ratings.map((item, index) => {
      const { star, review, reviewDate, name, userID } = item;
      return (
        <div key={index} className="review">
          <StarRating
            starDimension="20px"
            starSpacing="2px"
            starRatedColor="#F6B01E"
            rating={star}
            editing={false}
          />
          <p>{review}</p>
          <span><b>{reviewDate}</b></span>
          <br />
          <span><b>by: {name}</b></span>
        </div>
      );
    })}
  </>
);

方案2：渲染前强制校验数组类型 #

在map前判断是否为数组，非数组时用空数组兜底：

<>
  {(Array.isArray(props.ratings) ? props.ratings : []).map((item, index) => {
    const { star, review, reviewDate, name, userID } = item;
    return (
      <div key={index} className="review">
        <StarRating
          starDimension="20px"
          starSpacing="2px"
          starRatedColor="#F6B01E"
          rating={star}
          editing={false}
        />
        <p>{review}</p>
        <span><b>{reviewDate}</b></span>
        <br />
        <span><b>by: {name}</b></span>
      </div>
    );
  })}
</>

方案3：添加加载状态（适合异步获取数据场景） #

如果ratings是异步请求来的，在数据未就绪时显示加载提示，避免渲染非数组数据：

if (!props.ratings || !Array.isArray(props.ratings)) {
  return <div>加载评价中...</div>;
}

return (
  <>
    {props.ratings.map((item, index) => {
      const { star, review, reviewDate, name, userID } = item;
      return (
        <div key={index} className="review">
          <StarRating
            starDimension="20px"
            starSpacing="2px"
            starRatedColor="#F6B01E"
            rating={star}
            editing={false}
          />
          <p>{review}</p>
          <span><b>{reviewDate}</b></span>
          <br />
          <span><b>by: {name}</b></span>
        </div>
      );
    })}
  </>
);

额外建议 #

• 调试时可以在map前加console.log('当前ratings:', props.ratings)，确认渲染时的真实数据类型。
• 尽量用item.userID作为key而不是index，避免列表更新时的性能问题。

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