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

Question

我使用了 history.push("/") 从另一个页面重定向到我的主页，并且主页有一个 ProjectList 组件来调度一个动作：

应用程序.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

创建项目页面

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>
    );
}

项目列表组件：

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。这会导致获得未定义的对象。

任何帮助将不胜感激！

标签： reactjsreduxreact-redux

Answer 1

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

import { useLocation } from 'react-router-dom';
export default function ProjectList({level}){
    const location = useLocation(); // <--- listen to location
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(returnAllProjects());
    }, [dispatch, location]); //<--- location is added as dependency
    ...
    return ...
}