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

Question

我有一个带有 table 的应用程序，并且连接了一个 Reducer class：

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 更改）时，状态将丢失。

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

Answer 1

问题和实际解决方案与我的问题无关。问题出在 @mui.

中的 useMediaQuery 函数

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

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

State not updated when accessing Component directly in React Redux

reactjs

react-redux

react-hooks