React CRUD应用报错`this.props.onAdd is not a function`原因排查

嘿，我一眼就找到问题所在了！

你在AddProduct组件里调用this.props.onAdd时触发错误，核心原因是：父组件App在渲染AddProduct的时候，没有把自己定义的onAdd方法作为props传递给它。这就导致AddProduct的props里根本不存在onAdd这个属性，调用的时候自然会抛出“不是函数”的错误。

修复步骤 #

只需要修改App.js里的render部分，把原来的<AddProduct />改成下面这样，把onAdd方法传递过去：

<AddProduct onAdd={this.onAdd} />

这样AddProduct就能拿到正确的方法，点击Add按钮时就能正常执行添加逻辑了。

额外小提示（可选优化） #

你现在用ref来获取输入框的值，其实React更推荐使用受控组件的方式（通过state绑定输入框的值），不过这属于进阶优化项，先解决当前的报错问题优先～

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