在 React Redux 中直接访问组件时状态未更新答案

【问题标题】：State not updated when accessing Component directly in React Redux在 React Redux 中直接访问组件时状态未更新
【发布时间】：2022-01-03 06:57:39
【问题描述】：

我有一个带有表格的应用程序，并且连接了一个 Reducer 类：

const ProjectsList = (props) => {
    useEffect(() => {
        console.log("Loading projects");
        props.getProjects();
    }, []);

    const {projects} = props.projects;

    const items = projects.map(project => {
        return <Project key={project.id} project={project}/>;
    });

    return (
        <Main open={props.drawer}>
            <DrawerHeader/>
            <TableContainer>
                <Table sx={{minWidth: 650}} aria-label="Projects Table">
                    <TableHead>
                        <TableRow>
                            <TableCell>Name</TableCell>
                            <TableCell align="right">Created at</TableCell>
                            <TableCell align="right">Added by</TableCell>
                            <TableCell align="right">Actions</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {items}
                    </TableBody>
                </Table>
            </TableContainer>
        </Main>
    );
}

ProjectsList.propTypes = {
    getProjects: PropTypes.func.isRequired,
    projects: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
    projects: state.projects
});

export default connect(mapStateToProps, {
    getProjects
})(withRouter(ProjectsList));

Reducer（相关部分）：

const initialState = {
    projects: []
};

export const projectsReducer = (state = initialState, action) => {
    switch (action.type) {
        case GET_PROJECTS:
            return {
                ...state,
                projects: action.payload
            };

当我从另一个页面导航时，此组件正确加载（useEffect 挂钩运行，从 API 加载项目），但是当我尝试直接访问它（使用其直接 URL）或当此页面上发生任何更改并且页面获取重新渲染（例如：props.drawer 更改），状态丢失。

我希望每次都从商店加载状态，并且当整个页面刷新时它应该刷新。

【问题讨论】：

您能否澄清“当我尝试直接访问它时（使用其直接 URL）”是什么意思？效果有一个空依赖，所以它只在组件挂载时运行。您可以添加一个依赖项来重新触发效果，但尚不清楚任何依赖项可能是什么。
当然，感谢您的帮助！所以这个页面位于“/projects”下。当我打开页面“/”时，会加载另一个组件。如果我从抽屉菜单导航到此页面，它会完美加载。如果我直接打开这个 url 'domain/projects' 项目没有加载，虽然我可以看到 useEffect 运行（当组件安装时）。
我不确定这是否与您的问题有关，但我认为您的解构应该是const { projects } = props;。
@JeremyKlukan 不幸的是没有。有趣的是，从我看来，逻辑是正确的。每当数据应该加载时，我都可以从控制台输出中看到查询运行并且我得到了一个有效的答案，但不知何故它并不总是被调度

标签： reactjs react-redux react-hooks

【解决方案1】：

问题和实际解决方案与我的问题无关。问题在于@mui 中的useMediaQuery 函数。

它重新渲染了整个页面两次，这就是为什么它就像状态没有更新一样。如果我不直接访问它，则说明主要组件已经加载（useMediaQuery 所在的位置），这就是它以这种方式工作的原因。

Redux state not dispatched on page load

【讨论】：