React中cartReducer报‘Expected an assignment or function call...’错误求助

我一眼就看到问题出在你的cartReducer的default分支里啦！报错提示"Expected an assignment or function call and instead saw an expression"，本质是因为这个分支里你只写了state;——这只是一个没有任何作用的表达式，而Reducer要求每个分支都必须返回一个状态值，不能就这么空着。

错误原因分析 #

咱们看你的原代码最后一段：

default:state;

这里的state;只是引用了当前状态，但没有把它返回出去。Redux的reducer是纯函数，每一次触发action都必须返回一个新的（或者原有的）状态对象，不然Redux就不知道该怎么更新状态了，这才抛出了这个语法/逻辑错误。

修改后的完整代码 #

把default分支改成返回state就行，修改后的完整代码如下：

function cartReducer(state={cartitems:[]},action){ 
  switch(action.type) { 
    case CART_ADD_ITEM: 
      const item= action.payload; 
      const product=state.cartitems.find(x=>x.product===item.product); 
      if(product) { 
        return{ 
          cartitems:state.cartitems.map(x=>x.product===product.product? item:x) 
        }; 
      } 
      return { 
        cartitems:[...state.cartitems,item] 
      }; 
    default:
      return state; // 这里改成返回state，而不是只写state;
  } 
}

额外小提醒 #

• Reducer必须始终返回一个状态，哪怕是默认分支也要返回初始状态或者当前状态，绝对不能出现没有返回值的情况
• 注意你代码里的x=>是HTML转义后的字符，实际在JS文件中写代码时要改成x=>（如果是在HTML的<script>标签中写JSX，转义是必要的，但单独JS文件不需要）
• 确保CART_ADD_ITEM这个常量已经被正确定义和导入，不然后续可能会出现"未定义变量"的错误

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