React点击添加购物车按钮报TypeError: dispatch is not a function求助

• 核心错误1：useStateValue 返回值为数组，你使用对象解构导致无法正确获取dispatch
  你在Product.js中写的const { dispatch } = useStateValue();是错误写法。因为useReducer返回的是[state, dispatch]格式的数组，你需要改成数组解构：

// 第一个元素是全局状态，不需要的话可以用逗号占位
const [, dispatch] = useStateValue();

修复这个问题后点击按钮就能正常触发dispatch更新basket状态了。

• 潜在错误2：reducer代码存在拼写错误
  在REMOVE_FROM_BASKET分支中，你写的state.baslet.findIndex里的baslet属于拼写错误，正确应为state.basket。哪怕你现在暂时没用到删除功能，后续触发相关逻辑时这个错误会直接导致程序崩溃，建议提前修正。

修复完成后可以在Product组件中加一行测试代码验证状态是否正常更新：

const [{ basket }, dispatch] = useStateValue();
// 点击按钮后打印basket查看是否新增了对应商品
console.log(basket)

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