Question

我使用了history.push（“ /”）从另一个页面重定向到我的主页，并且该主页具有一个分派动作的ProjectList组件：

App.js

function App(){
    return(
        <Router>
            <NavBar></NavBar>
            <Switch>
                <Route
                    path="/createProject"
                    component={withAuthentication(CreateProjectPage)}
                ></Route>
                <Route
                    exact
                    path="/"
                    component={withAuthentication(HomePage)}
                ></Route>
            </Switch>
        </Router>
    );
}
export default App

CreateProjectPage

function CreateProject(){
    const dispatch = useDispatch();
    const history = useHistory();

    const submitHandler = (e) => {
        ...
        dispatch(createNewProject({...}));
        history.push("/");
    }
    return (
        <div>
            ...
            <Button
                onClick={submitHandler}
                variant="contained"
                color="primary"
              >
                Submit
            </Button>
          
        </div>
    )
    
}

主页

export default function HomePage(props){
    return (
        <div>
            <ProjectList level="one"/>
            ...
        </div>
    );
}

ProjectList组件：

export default function ProjectList({level}){
    console.log(level); //onRedirect, this gets called

    const dispatch = useDispatch();

    useEffect(() => {
        console.log("dispatch returnAllProjects called") //onRedirect, this does not get called
        dispatch(returnAllProjects());
    }, [dispatch]);
    ...
    return ...
}

仅在刷新时调用此returnAllProjects。这导致获得未定义的对象。

任何帮助将不胜感激！

Answer 1

如果您希望在重定向后调用效果，则应添加grant_type:refresh_token作为依赖项：

location

Redux Action仅在刷新时调度，而不在重定向后调度

1 个答案: