React Js ..updating状态但数组长度不会立即更改

Question

我正在尝试更新食谱的数量，

  constructor(){
    super();
    this.state={
      recipes : [{recipeName:'Masala',ingredients:['garam masala','onions']},
                {recipeName:'Tomato soup',ingredients:['tomatos','onions']}
              ],
      addRecipeModalShow : false,
      editRecipeModalShow : false,
      editIndexValue:0,
      recipeCount:0,
      newRecipes:{recipeName:'',ingredients:[]}
    };
  }

但是在创建新配方并推送到数组时，即使创建了新配方，计数也不会改变

componentDidMount = () =>{
    this.updateRecipeCount();
  }

  updateRecipeCount = () => {
    let count = this.state.recipes.length;
    this.setState({
      recipeCount:count
    });

  }

这是创建新配方的功能

  saveNewRecipe  = (newRecipe) =>{
    let recipes = this.state.recipes.slice();
      console.log(this.state.recipes);
    recipes.push(newRecipe);
      console.log(this.state.recipes.length);
    this.setState({
        recipes:recipes,
        newRecipes:{recipeName:"", ingredients:[]}
    });
    this.updateRecipeCount();
        console.log(this.state.recipes);
        console.log(this.state.newRecipes);
       this.hideModal();

  }

感谢