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

Question

I'm very new to react trying to learn it by building a small app which displays ingredients based on button clicks.

In my recipe view component I'm trying to render multiple ingredient views however I'm getting this error:

Uncaught Error : Objects are not valid as a React child (found: object with keys {ingred}). If you meant to render a collection of children, use an array instead.

My code is far from perfect, and it's difficult for me to try and explain the issue I can link you to my full application if you don't understand my explanation to see the error for yourself. Here's the relevant code:

 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; 

And here is my Ingredient View ( the console log was for debugging)

 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; 

Answer 1

There are a couple things here that I can see right off the bat in your RecipeView component.

First of all, in it's return statement, you have {set_ingredients !== undefined && {ingred} } . The brackets surrounding ingred are incorrect. You are not allowed to have those brackets within them in such a manner in JS (well... You are technically allowed, but you are turning ingred into an object with ingred as an attribute, which I don't think was your intention and they cannot be rendered in React as the error being displayed to you suggests), so the correct statement would be {set_ingredients !== undefined && ingred } .

Secondly, still looking at that same statement. From what I can tell, your intention is to display ingred if set_ingredients is NOT undefined and nothing otherwise, is this correct? The way you are doing it is incorrect, since if the first condition is false , you will display false . React does not render boolean values. To fix this, I would use the ternary operator , which will make the statement look like this:

{set_ingredients !== undefined ? ingred : null }

In your IngredView , I am not sure what you are trying to do. You set your components variable as the first element from set_ingredients . This will only work if the object you are trying to deconstruct components from is from the first index of set_ingredients , which based off of the screenshot you showed me, is not the case. The correct way to do this, would simply be:

const { components } = set_ingredients

So to sum it all up:

• Remove the extra brackets from the return statements RecipeView . The result should be this:

  {set_ingredients !== undefined && ingred }

• Use the ternary operator instead of the && statement in the above code:

  {set_ingredients !== undefined ? ingred : null }

• In IngredView , pull components out of the set_ingredients object, not the first index of it:

  const { components } = set_ingredients