Question

我创建了一个React.FunctionComponent，它应该充当孩子的包装器，并且一旦在Typescript中完成了一些redux调度工作，它就应该做一些工作，但是它不起作用。我创建了包装器：

import React, {useState, useEffect} from 'react'
import { useTypedSelector } from "../../Models/States";

const RoutingWrapper: React.FunctionComponent = ({children, ...rest }) => {

const state = useTypedSelector(state => state);

useEffect(() =>{
  if(state.routing.routingLoaded)
  {
     //doStuff
  }
},[state.routing])

...
return(...)

export {RoutingWrapper}

我从以下位置获得了useTypedSelector挂钩

import { useSelector, TypedUseSelectorHook } from "react-redux";
import { RoutingStateInterface } from "./RoutingState"; //Just Types and Interfaces

export interface RootState {
  ...
  routing: RoutingStateInterface
}

export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

在渲染组件之后，发生了redux魔术，我希望组件等待状态更改然后做一些事情。您是否知道状态更改后为什么不调用useEffect？如果我在完成所有操作后查看状态，则可以看到该状态的state.routing.routingLoaded值为true，但是在修改完doStuff部分后，它没有执行useEffect。

像这样添加用于渲染的辅助功能不起作用：

const state = useTypedSelector(state => state,(()=>{return true}));

任何想法或提示都会很棒：）

谢谢基督徒

编辑：

这是我更新状态的方式：

let initialState: RoutingStateInterface = {
  routingLoaded: false,
  routes: {},
  currentRouting: undefined,
};

const loadRouting = (
  state: RoutingStateInterface,
  action: RoutingActions.RoutingAction
  ) => {
    switch (action.payload.name) {
      case "LoadRoutingPayload":
        const newState = Object.assign({}, state);
        action.payload.body.map((item) => {
          newState.routes[item.path] = item;
        });
        newState.routingLoaded = true;
        return newState;
      default:
        return state;
     }
  };

Answer 1

我找到了解决方案：）

似乎没有正确监视对象中的更改，因此我决定监视我需要的确切键

const routingLoaded = useTypedSelector(state => state.routing.routingLoaded);

useEffect(() =>{
  if(routingLoaded)
  {
    //doStuff
  }
},[routingLoaded])

现在它正在按应有的方式运行：）

在redux状态更改后未调用React useEffect Hook

1 个答案: