Question

我无法在render函数之外访问状态当前值。它总是返回初始状态值

我有一个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函数中进行这些检查，还是我做错了什么，导致我无法在render函数之外获取状态的实际值？

Answer 1

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

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

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

在呈现函数

1 个答案: