对象作为React子对象无效(找到:带有键{Dname，recipe_diet}的对象)。如果要呈现子集合，请使用数组。

Question

我可以得到我所有的api信息，但是当我创建一个新的“菜谱”时，我尝试在前面显示它，我得到了这个错误，但是只是在我创建的“食谱”上，:c。

​

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) => (
 
 <span><li key={diets}> {diet}</li></span>
                        )
                    )}
 </div>

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


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

}

​

这是Api信息，上面的一个来自api，另一个是我创建的：

在这里输入图像描述

Answer 1

由于屏幕截图diets可以是字符串数组或对象数组，因此需要检查diet是否为对象。

 {!diets.length ?
  <span>This Recipe doesnt have a diet</span> : 
  diets.map((diet) => (
    <span><li key={diet.id}>{typeof diet === 'string' ? diet : diet.Dname}</li></span>
    )
  )}