ReactJS呈现子集合时抛出“不变冲突：对象作为React子对象无效”错误

Question

我正在React中制作一个RecipeBox应用程序，在我尝试实现搜索功能之前，它运行良好。一旦用户在搜索栏中输入搜索项，就会抛出错误。此render方法中的else块抛出错误-

render() {
        var gridRecipes = this.props.recipes;
        let onDelete = this.props.onRecipeDelete;


        //second set of props
        let onRecipeNameEdit = this.props.onRecipeNameEdit;
        let onRecipeIngEdit = this.props.onRecipeIngredientsEdit;
        let onRecipeTagsEdit = this.props.onRecipeTagsEdit;
        let onRecipeEditSubmit = this.props.onRecipeEditSubmit;
        let onRecipeEditSelect = this.props.onRecipeEditSelect;

        let filterNameEdit = this.props.filterNameEdit;
        let filterIngredientsEdit = this.props.filterIngredientsEdit;
        let filterTagsEdit = this.props.filterTagsEdit;

        //props for search
        let searchedItem = this.props.searchItem;


        console.log(gridRecipes);
        var recipeCards = [];

        if(searchedItem === "") {
            recipeCards = gridRecipes.map(function (recipe, index) {
                return <div className="recipe-item" key={index}>
                    <RecipeCard recipe={recipe} key={index} index={index} onDelete={onDelete}
                                onRecNameEdit={onRecipeNameEdit}
                                onRecIngredientsEdit={onRecipeIngEdit}
                                onRecTagsEdit={onRecipeTagsEdit}
                                onRecEditSubmit={onRecipeEditSubmit}
                                filterNameEdit={filterNameEdit}
                                filterIngredientsEdit={filterIngredientsEdit}
                                filterTagsEdit={filterTagsEdit}
                                onRecipeEdit={onRecipeEditSelect}
                    />
                </div>
            });
        }

        else {
            console.log(`user searched for ${searchedItem}`);
            recipeCards = gridRecipes.filter(function (recipe, index) {
                //console.log(recipe);
                if(recipe.name.toLowerCase().indexOf(searchedItem) !== -1) {
                    return <div className="recipe-item" key={index}>
                        <RecipeCard recipe={recipe} key={index} index={index} onDelete={onDelete}
                                    filterNameEdit={filterNameEdit}
                                    filterIngredientsEdit={filterIngredientsEdit}
                                    filterTagsEdit={filterTagsEdit}
                        />
                    </div>
                }
            })
            console.log(recipeCards);
            console.log(Array.isArray(recipeCards));
        }

        return (
            <div className="flex-container">
                {recipeCards}
            </div>
        )
    }

这是错误消息-

Uncaught Error: Objects are not valid as a React child (found: object with keys {name, ingredients, tags}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `RecipeFlexContainer`.

console.log(recipeCards);
console.log(Array.isArray(recipeCards));

控制台显示-

[Object]
true

这表明recipeCards是一个包含对象的数组。但是返回会抛出错误-

return (
            <div className="flex-container">
                {recipeCards}
            </div>
        )

有趣的是，如果我删除搜索栏功能并完全删除else块，相同的return语句就可以正常工作，不会抛出任何错误-

else {
            console.log(`user searched for ${searchedItem}`);
            recipeCards = gridRecipes.filter(function (recipe, index) {
                //console.log(recipe);
                if(recipe.name.toLowerCase().indexOf(searchedItem) !== -1) {
                    return <div className="recipe-item" key={index}>
                        <RecipeCard recipe={recipe} key={index} index={index} onDelete={onDelete}
                                    filterNameEdit={filterNameEdit}
                                    filterIngredientsEdit={filterIngredientsEdit}
                                    filterTagsEdit={filterTagsEdit}
                        />
                    </div>
                }
            })
            console.log(recipeCards);
            console.log(Array.isArray(recipeCards));
        }

这是我在Codepen上的应用程序。

复制步骤-

1. 在搜索栏中搜索现有的食谱名称，如大蒜
2. 拉起控制台

这在RecipeFlexContainer组件中。

有人能解释发生了什么事吗？

Answer 1

将过滤器更改为映射，即可修复：

// after
recipeCards = gridRecipes.map(function (recipe, index) {

// before
recipeCards = gridRecipes.filter(function (recipe, index) {

但是更干净的方法是：

gridRecipes
  .filter(r => r.name.toLowerCase().indexOf(searchedItem) !== -1)
  .map((r, i) => (
    <div className="recipe-item" key={i}> 
      <RecipeCard /> 
    </div>)
  );