React报错：Objects are not valid as a React child 问题咨询

你当前的代码里，newDesserts是一个由对象组成的数组。当你在JSX里直接写{newDesserts}时，React会尝试渲染数组里的每一个对象，但React不允许直接渲染普通JavaScript对象——它只能渲染字符串、数字、JSX元素或者这些类型的数组，所以才会抛出这个错误。

你需要把数组里的每个对象转换成React能识别的JSX元素，比如用标签把对象的属性展示出来。下面是两种可行的修改方式：

方式一：直接在渲染时转换为JSX #

import React from 'react'

const desserts = [
  {
    title: 'Chocolate Cake',
    description: 'Chocolate cake is a cake flavored with melted chocolate',
    calories: 500,
  },
  {
      title: 'Chocolate Cake',
      description: 'Chocolate cake is a cake flavored with melted chocolate',
      calories: 500,
    }
];
const CourseraList = () => {
  return (
    <div>
      {desserts.map((dessert, index) => (
        // 必须添加key属性，帮助React追踪列表项的变化
        <div key={index} className="dessert-item">
          <h3>{dessert.title.toUpperCase()}</h3>
          <p>{dessert.description}</p>
          <p>热量：{dessert.calories} cal ({dessert.calories / 1000} kCal)</p>
        </div>
      ))}
    </div>
  )
}

export default CourseraList

方式二：先处理数据再渲染为JSX #

import React from 'react'

const desserts = [
  {
    title: 'Chocolate Cake',
    description: 'Chocolate cake is a cake flavored with melted chocolate',
    calories: 500,
  },
  {
      title: 'Chocolate Cake',
      description: 'Chocolate cake is a cake flavored with melted chocolate',
      calories: 500,
    }
];
const CourseraList = () => {
  const newDesserts= desserts.map((dessert) => {
      return {
          ...dessert,
          title: dessert.title.toUpperCase(),
          kCal: dessert.calories / 1000,
      }
  })
  
  return (
    <div>
      {newDesserts.map((item, index) => (
        <div key={index}>
          <h3>{item.title}</h3>
          <p>{item.description}</p>
          <p>热量：{item.calories} cal ({item.kCal} kCal)</p>
        </div>
      ))}
    </div>
  )
}

export default CourseraList

• 渲染列表时必须给每个列表项加key属性，优先使用数据自带的唯一ID；如果没有唯一ID，暂时可以用索引（但不推荐在列表会动态增删时使用索引）。
• React仅支持渲染基本类型（字符串、数字、布尔值、null、undefined）或者JSX元素/组件，无法直接渲染对象、函数这类复杂类型。

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