Javascript ReactJS呈现一组子对象抛出；不变冲突：对象作为React子对象无效；错误

我正在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>
        )
    }

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

查看错误消息并读取，子对象集合似乎是作为单个对象/对象集合呈现的，而不是包含对象的数组。但事实并非如此。我在代码中有两个

console.log

语句来验证这一点-

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

控制台显示：

[Object]
true

这表明

recipeCards

是一个数组包含对象。但是

返回

会抛出错误-

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>
        )
    }

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

这是我的应用程序

复制步骤-

在搜索栏中搜索现有配方名称，如“大蒜”

把控制台拉上来

这在

RecipeFlexContainer

组件中

---

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

将

过滤器更改为
映射，您就可以修复它了：

// 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>)
  );

gridRecipes
.filter（r=>r.name.toLowerCase（）.indexOf（searchedItem）！=-1）
.map（（r，i）=>(
)
);
因此，您要完成的是在用户开始键入配方名称时过滤配方？是的，准确地说。对不起，如果不清楚的话。我只想在菜谱名称包含用户输入的内容时才显示菜谱。Sam刚刚回答了您的问题，问题是，您想返回菜谱并将其保存到
recipeCards
变量中，这就是为什么使用
map
而不是
filter
@bntzio@Sam rad获得了它！非常感谢。尽管如此，我不明白为什么直接使用
.filter（）
不起作用。我认为就像
.map（）
，
.filter（）
一样，它也会返回一个数组，其中包含通过测试的元素（在本例中是对象）
r.name.toLowerCase（）.indexOf（searchedItem）！=-1
。