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

Question

我有一个带表的应用程序，一个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));

减速机(相关部件(：

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所在的位置(，这就是它以这种方式工作的原因。

页面加载时未调度Redux状态