React结合Context API开发彩票 dispatch后state变更但页面不重渲染求助

React 的 useReducer 判定 state 是否更新、是否触发组件重渲染的逻辑，是对比前后两次state的内存引用地址，只要引用完全一致，哪怕state内部的属性值全部修改，React也会判定没有更新、不触发重渲染。你当前的代码存在三个直接导致这个问题的错误：

• 在reducer中直接原地修改定义在模块顶层的全局LottoBox数组，最后把这个原始数组直接return。因为初始传入useReducer的state本身就是这个LottoBox的引用，修改完成后返回的新state和旧state的内存地址完全相同，React做浅对比时直接跳过更新流程，自然不会触发页面重渲染。这也是为什么控制台能打印出修改后的数值——你直接改了同一个内存地址里的对象属性，但React根本感知不到引用变化。
• reducer完全没有使用传入的当前state参数，反而直接操作模块级的外部变量，违背了reducer必须是纯函数的要求——纯函数不能修改外部作用域的变量，只能基于入参计算并返回新的state。
• 误用map方法：map的设计是遍历返回全新数组，你在回调里直接修改原数组的属性，既没有接收map的返回值，还产生了修改外部变量的副作用。
• 补充隐藏bug：switch的default分支直接return（即返回undefined），后续如果触发其他类型的action，会直接导致state变成undefined，引发页面崩溃。

1. 重写reducer逻辑，保证返回全新的state引用：
   基于reducer接收的旧state生成全新的数组，每个数组项也生成全新的对象，避免原地修改原state的属性，示例代码：

   export function reducer(state, action) {
     switch (action.type) {
       case "DROW":
         // 遍历旧state，返回全新的数组引用
         return state.map(box => {
           // 每个数组项返回全新的对象，避免原地修改原对象属性
           if (box.index === 7) return { ...box, num: "+" };
           return { ...box, num: Math.floor(Math.random() * 45) };
         })
       // default分支必须返回传入的旧state，不能返回空值
       default:
         return state;
     }
   }
   

2. 移除reducer中对全局LottoBox的直接修改逻辑，这个全局变量只需要作为useReducer的初始值传入即可，不需要在更新逻辑中操作。

按照上述方法修改后，每次dispatch触发时，reducer都会返回一个和旧state内存地址完全不同的新数组，React检测到引用变化后就会正常触发组件重渲染，页面上的号码会同步更新为最新的随机数。

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