React报错：自定义Recipe渲染触发子元素无效问题

问题根源 #

API返回的diets是字符串数组（比如["gluten free", "vegetarian"]这类直接可渲染的文本值），但你自定义创建的Recipe的diets是对象数组（每个元素是包含Dname和recipe_diet键的对象）。当你在map里直接渲染diet这个对象时，React无法将对象作为子节点渲染，因此触发报错。

另外你的代码还有个小问题：map里的key用了整个diets数组，这不符合React的key规范，应该用每个diet项的唯一标识。

解决方案 #

1. 渲染对象中的具体属性值 #

修改map逻辑，直接提取对象里的文本属性（比如Dname或recipe_diet，根据你实际需要展示的字段选择）进行渲染，同时修正key的取值：

import React from "react";
import './estilos/Cartita.css'

export default function Card({image, title, diets, healthScore, createdInBd, id}){

return (
    <div className="containerr">
        <div className="card">
            <h2>{id}</h2>
            <img src={image} alt="img not found" width="200px" height="250px"/>
            
            <h2>NOMBRE:</h2>
            <h5>{title}</h5>
            <p>Tipo de dieta</p>
            <div>
                {(!diets.length) ? (
                    <span>This Recipe doesnt have a diet</span>
                ) : (
                    diets.map((diet) => (
                        // 渲染对象的具体属性，同时用属性值作为唯一key
                        <span key={diet.Dname}>
                            <li>{diet.Dname}</li>
                        </span>
                    ))
                )}
            </div>

            <h2>HEALTSCORE:</h2>
            <h5>{healthScore}</h5>

            <h5>{createdInBd}</h5>
        </div>
    </div>
);
}

2. 兼容API和自定义数据的结构差异 #

如果希望同时兼容两种数据结构（API的字符串数组+自定义的对象数组），可以增加类型判断：

diets.map((diet) => {
  // 先判断当前diet是字符串还是对象，再取对应的值
  const dietName = typeof diet === 'string' ? diet : diet.Dname;
  return <span key={dietName}><li>{dietName}</li></span>;
})

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