React报错：Cannot convert undefined or null to object 问题求助

嘿，我一眼就揪出了问题的根源——你在更新状态的时候犯了个小疏忽，直接把配料对象改成了单个数字，导致后续组件接收不到正确的对象格式，自然触发了报错。

错误的核心原因 #

看你CoffeeBuilder里的addIngHandler方法，这段代码出了问题：

this.setState({ totalPrice: oldPrice + ING_PRICE, ingredients: newCount, });

你把ingredients的值设成了newCount，但newCount只是单个配料（比如sugar）加1后的数字，不是你之前已经处理好的完整配料对象updatedIng！这就导致触发这个方法后，state.ingredients从原本的对象变成了数字，传给OrderSummary后，Object.keys()没法处理非对象类型，直接抛出了类型错误。

修复代码 #

把setState里的ingredients值换成你已经创建好的updatedIng对象就行：

this.setState({ 
  totalPrice: oldPrice + ING_PRICE, 
  ingredients: updatedIng, // 这里用处理好的配料对象，不是单个数字
});

为什么console.log能正常输出？ #

因为第一次初始化渲染时，state.ingredients是正常的对象，所以初始的console.log能拿到数据。但当你点击添加配料触发addIngHandler后，状态被错误更新，下一次渲染OrderSummary时，props.ingredients已经变成了数字，这时候再调用Object.keys()就会报错啦。

另外提一句，你还没实现removeIngHandler方法，不过这不是当前报错的原因，后续记得补上哦～

内容的提问来源于stack exchange，提问作者C0deN3rd