React中子组件调用父组件方法无响应如何解决？有哪些更简单的实现方案？

问题根因 #

• 你在子组件Angle的Button组件上重复声明了onClick属性，后定义的onClick={() => setCurrentId(angle._id)}会覆盖先定义的onClick={handleAddToCart}，所以点击按钮时不会触发打开snackbar的逻辑，自然没有响应。

修复方案 #

把两个点击逻辑合并到同一个onClick回调中即可，修改Angle组件的Button代码：

<Button 
  style={{ color: 'white' }} 
  size="small" 
  onClick={() => {
    handleAddToCart();
    setCurrentId(angle._id);
  }}
>
  <Add fontSize="large" />
</Button>

修改后点击按钮就会同时执行设置当前ID、打开snackbar两个逻辑。

其他可选实现方式 #

你当前通过父组件中转状态的方案就是最适合当前场景的轻量方案，不需要额外引入复杂度。如果你的项目后续多处组件都需要控制这个snackbar的展示，可以考虑将snackbar的状态存到Redux中，所有组件都可以直接dispatch action修改状态控制snackbar，不需要逐层传递回调参数。

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