Javascript 未捕获错误：对象作为React子对象无效，但它'；这是一个数组

我对尝试通过构建一个基于按钮点击显示成分的小应用程序来学习它是非常陌生的

在我的配方视图组件中，我试图呈现多个成分视图，但出现以下错误：

未捕获错误：对象作为React子对象无效（找到：具有键{ingred}的对象）。如果要呈现子对象集合，请改用数组

我的代码远非完美，我很难尝试解释这个问题。如果您不理解我的解释，您可以将您链接到我的完整应用程序，以便自己看到错误。以下是相关代码：

从“React”导入React；
从“/IngredView”导入IngredView
导入“./styles/RecipeView.css”；
常量RecipeView=（{recipe}）=>{
const{recipe\u name，set\u components}=recipe
常量isIngredDefined=（设置元素！==未定义）
const ingred=已定义
？设置配料。映射（设置配料=>{
返回(
);
})
：“无”
控制台日志（ingred）；
返回(
{recipe_name}
{set_components！==未定义&&
{ingred}
}
)
}
导出默认RecipeView在您的
RecipeView
组件中，我可以立即看到一些东西

首先，在它的
return
语句中，有
{set_components！==undefined&&{ingred}}
。
ingred
周围的括号不正确。在JS中，不允许以这种方式将这些括号放在括号内（好吧……从技术上讲，你是被允许的，但你正在将
ingred
变成一个属性为
ingred
的对象，我认为这不是你的意图，并且它们不能按照显示给你的错误的提示在React中呈现），因此正确的语句应该是
{set\u components！==undefined&&ingred}

第二，仍然在看同样的陈述。据我所知，如果
set\u components
不是
undefined
并且没有任何其他内容，您的意图是显示
ingred
，对吗？您这样做是不正确的，因为如果第一个条件是
false
，您将显示
false
。React不呈现布尔值。为了解决这个问题，我将使用，这将使语句看起来像这样：

{set_ingredients !== undefined ? ingred : null }

在您的
IngredView
中，我不确定您想做什么。您可以将
组件
变量设置为
设置配料
中的第一个元素。只有当您试图从中解构
组件的对象来自
set\u components
的第一个索引时，这才起作用，该索引基于您向我展示的屏幕截图，而不是实际情况。正确的方法是：

const { components } = set_ingredients

总之：


从返回语句
RecipeView
中删除额外的括号。结果应该是：

{set_components！==未定义（&ingred}

在上述代码中使用三元运算符，而不是
&&
语句：

{set_components！==未定义？ingred:null}

在
IngredView
中，从
set\u components
对象中拉出
组件，而不是它的第一个索引：

const{components}=set_成分

控制台.log（红色）
显示的是什么？@theJuls这就是它显示的你是上帝！非常感谢您的帮助：）