React Redux中直接访问组件或页面重渲染时State未更新问题

问题根因 #

1. 你贴出的projectsReducer缺少默认返回分支，Redux 中所有 reducer 收到任意 action 时都会被触发执行，当其他 action（比如控制抽屉显隐的action）触发时，你的 reducer 没有匹配到对应case也没有默认返回当前state，会直接返回undefined，导致 projects 状态被清空，这是重渲染时状态丢失的核心原因。
2. 页面直接访问/刷新时，Redux 本身是内存级存储，刷新后所有状态会重置为初始值，如果你没有做数据持久化或者重新拉取逻辑，自然会没有数据。
3. 组件没有做空状态容错，异步请求返回前如果直接对空数组做渲染会出现空白，特殊情况下甚至会报错。

修复步骤 #

1. 先修复Reducer语法问题，补充默认分支

const initialState = {
    projects: []
};

export const projectsReducer = (state = initialState, action) => {
    switch (action.type) {
        case GET_PROJECTS:
            return {
                ...state,
                projects: action.payload
            };
        // 必须加默认分支，返回当前state
        default:
            return state;
    }
};

2. 处理刷新/直接访问页面的状态问题

两种方案可选：

• 方案A：每次组件挂载都重新拉取数据（推荐，保证数据最新）
  你现有的useEffect逻辑本身已经会在组件挂载时触发拉取，只需要补充加载状态和空状态判断即可：

  const ProjectsList = (props) => {
      const [loading, setLoading] = useState(true);
      
      useEffect(() => {
          console.log("Loading projects");
          setLoading(true);
          // 假设getProjects是异步请求，请求完成后把loading改成false
          props.getProjects().finally(() => setLoading(false));
      }, [props.getProjects]); // 把用到的方法加入依赖数组，符合React Hooks规则
  
      const {projects} = props.projects || {}; // 加默认值避免解构报错
      
      // 加载中状态
      if (loading) return <Main open={props.drawer}><DrawerHeader/><p>加载中...</p></Main>;
      // 空状态
      if (!projects || projects.length === 0) return <Main open={props.drawer}><DrawerHeader/><p>暂无项目数据</p></Main>;
  
      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>
      );
  }
  

  如果你的getProjects是通过Redux Thunk/ Saga封装的异步方法，确保它返回Promise，这样才能用finally捕获请求完成状态。

• 方案B：Redux数据持久化（适合需要本地缓存数据的场景）
  可以用redux-persist库把projects状态持久化到localStorage/sessionStorage，页面刷新时会自动从本地存储恢复状态，不需要每次重新拉取。

验证修复效果 #

1. 抽屉显隐等其他操作触发重渲染时，因为reducer已经返回当前state，projects状态不会再丢失
2. 直接访问URL/刷新页面时，要么会自动重新拉取数据，要么从本地缓存恢复状态，不会出现空白

内容的提问来源于stack exchange，提问作者Kristof Rado