React 中的数组合二为一

有一种形式，其中有两个输入，当每个输入发生变化时，组件的状态就会发生变化(recipeName, recipeIngredients)。接下来是一个Добавить创建对象的按钮

let recipe = {
  name: this.state.recipeName,
  ingredients: this.state.recipeIngredients.split(',')
}

并将其添加到食谱数组中

addRecipe(e) {
        if (this.state.recipeName.length > 0 && this.state.recipeIngredients.length > 0) {
            let recipe = {
                name: this.state.recipeName,
                ingredients: this.state.recipeIngredients
            }
            this.setState({
                recipes: this.state.recipes.push(recipe)
            })
            this.handleClose(); //закрытие модального окна, в котором всё происходит
        } else {
            alert('Fill all inputs!')
        } 
    }

试图显示数组的内容

<ul>
  {this.state.recipes.map(item => <li>item.name</li>)}
</ul>

在这个阶段，recipes由于某种原因，数组相等1并显示错误TypeError: this.state.recipes.map is not a function