Question

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

在我的食谱视图组件中，我试图渲染多个成分视图但是我收到此错误：

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

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

＆＃13;

import React from 'react';
import IngredView from './IngredView'
import './styles/RecipeView.css';

const RecipeView = ( {recipe} ) => {
  const { recipe_name, set_ingredients } = recipe
  const isIngredDefined = (set_ingredients !== undefined)
  const ingred = isIngredDefined
  ? set_ingredients.map(set_ingredients => {
    return (
      <IngredView
        set_ingredients={set_ingredients}
      />
    );
  })
  : "none"
  console.log(ingred);
  return (
    <section className="recipe-view">
      <h1 className="recipe-name">{recipe_name}</h1>
      {set_ingredients !== undefined &&
        {ingred}
      }
    </section>
  )
}

export default RecipeView;

＆＃13;

这是我的成分视图（控制台日志用于调试）

＆＃13;

import React from 'react';
import './styles/IngredView.css'

const IngredView = ({set_ingredients}) => {
  const { components } = set_ingredients[0]
  console.log(set_ingredients);
  return <section className="ingred-view"><img className="ingred-image" alt="comp" src={components[0]} /><img className="ingred-image" alt="comp" src={components[1]} /><img className="ingred-image" alt="comp" src={components[2]} /><img className="ingred-image" alt="comp" src={components[3]} /><img className="ingred-image" alt="comp" src={components[4]} /></section>
}

export default IngredView;

＆＃13;

Answer 1

我可以在RecipeView组件中直接看到一些内容。

首先，在return语句中，您有{set_ingredients !== undefined && {ingred} }。围绕ingred的括号不正确。你不允许在JS中以这种方式在其中包含这些括号（嗯......从技术上讲，你是允许的，但是你将ingred转换为一个以ingred为属性的对象，我不要认为是你的意图而且他们无法在React中呈现，因为显示给你的错误建议），所以正确的陈述是{set_ingredients !== undefined && ingred }。

其次，仍然看着同样的陈述。据我所知，如果ingred不是set_ingredients，你的目的是显示undefined，否则，这是正确的吗？你这样做的方式是不正确的，因为如果第一个条件是false，你将显示false。 React不呈现布尔值。要解决这个问题，我会使用ternary operator，这将使语句看起来像这样：

{set_ingredients !== undefined ? ingred : null }

在IngredView中，我不确定您要做什么。您将components变量设置为set_ingredients中的第一个元素。这只有在您尝试解构components的对象来自set_ingredients的第一个索引时才有效，该索引基于您向我展示的屏幕截图，并非如此。这样做的正确方法就是：

const { components } = set_ingredients

总而言之：

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

{set_ingredients！== undefined＆amp;＆amp; ingred}
在上面的代码中使用三元运算符代替&&语句：

{set_ingredients！== undefined？ ingred：null}
在IngredView中，将components拉出set_ingredients对象，而不是它的第一个索引：

const {components} = set_ingredients

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

1 个答案: