在渲染函数之外使用 useReducer() 的状态

Question

我无法访问渲染函数之外的状态当前值。它始终返回初始状态值

我有一个 signalR 连接，当我收到消息时，我想调度一个操作。"问题"是：我对两个状态对象使用相同的化简器。因此，我想检查我应该将操作分派到哪一个。

还原剂：

const processoReducer = (state, action) => {
  switch (action.type) {
    case "ProcessoIniciado":
      return {...action.payload};
    case "ItemIniciado":
      return { ...state, iniciados: state.iniciados + 1 };
    case "ItemConcluido":
    case "ItemErro":
      var arr = state.mbTiles.slice();
      arr.pop();
      return {
        ...state,
        executados: state.executados + 1,
        iniciados: state.iniciados - 1,
        mbTiles: [action.payload, ...arr]
      };
    default:
      return {...state};
  }
};

元件：

const mbtiles = props => {
  const [processoSetor, dispatchSetor] = useReducer(processoReducer, {});
  const [processoUsuario, dispatchUsuario] = useReducer(processoReducer, {});
...
useEffect(() => {
...
  hubConnection.on("ItemConcluido", mbtile => {
      updateProcesso(mbtile, "ItemConcluido");
    });
}, []);
const updateProcesso = (mbtileInfo, type) => {
    if (mbtileInfo.processo === processoSetor.id)
      dispatchSetor({ type, payload: mbtileInfo });
    else if (mbtileInfo.processo === processoUsuario.id)
      dispatchUsuario({ type, payload: mbtileInfo });
  };
...
return (
  <>
        <MbTilesContainer processo={processoUsuario} />
        <MbTilesContainer processo={processoSetor} />
  </>

问题出在这一行：

if (mbtileInfo.processo === processoSetor.id)

"processoSetor" 始终为空。即使在"ItemIniciado"操作(代码省略(之后，该操作设置了之前的状态并呈现一切正常。

如果我评论这一行，一切都会继续呈现得很好。

所以我想知道我是否必须使用单个状态并在 de reducer 函数内进行这些检查，或者我是否做错了什么，阻止我在渲染函数之外获取状态的实际值？

Answer 1

问题是由于闭包而出现的，因为您的useEffect仅在初始渲染时运行，当它订阅hubConnection时，它指的是在初始渲染时创建的updateProcesso函数，该函数在当前词法范围内是指化简器状态的初始值，它是一个空对象。当组件重新渲染此函数时，将重新创建此函数，而 hubConnection 回调仍引用使用化简器状态的旧值的旧函数。

要解决此问题，您必须将依赖项数组中的processoSetor和processoUsuario传递给useEffect这是要useEffect的第二个参数

useEffect(() => {
...
  hubConnection.on("ItemConcluido", mbtile => {
      updateProcesso(mbtile, "ItemConcluido");
    });
}, [processoSetor, processoUsuario]);