React页面导航访问正常，回退或直接输地址加载空数组如何修复

修复方案 #

1. 修复状态初始值与空数据兼容 #

你当前loadedAttendees没有设置初始值，请求失败、接口返回非200状态时会保持undefined，调用map方法会报错，同时空数组场景没有提示。

// 修改状态初始化，默认设为空数组
const [loadedAttendees, setLoadedAttendees] = useState([]);

修改渲染逻辑，增加空数据提示：

if (!isLoading) {
  // 新增空数据判断
  if (loadedAttendees.length === 0) {
    allAttendees = <tr><td colSpan={3}>暂无参会人员数据</td></tr>
  } else {
    // 建议给循环项加唯一key，避免React告警
    allAttendees = loadedAttendees.map(person => (
      <tr key={person.id}>
        <td>{person.first + " " + person.last}</td>
        <td>{person.contact}</td>
        <td>{person.handicap}</td>
      </tr>
    ))
  }
}

2. 规范请求逻辑，覆盖所有返回场景 #

之前的代码混用await和.then，只处理了200状态的返回，其他2xx状态、请求报错场景都没有更新状态，会导致加载结束后数据还是初始值。

const getAttendees = async () => {
  setLoading(true);
  try {
    const response = await axios.get("/attendees");
    // 所有2xx状态都视为请求成功，更新数据
    setLoadedAttendees(response.data);
  } catch (error) {
    console.log(error);
    // 出错时重置为空数组，避免后续逻辑报错
    setLoadedAttendees([]);
  } finally {
    // 不管请求成功失败都结束加载状态
    setLoading(false);
  }
}

3. 解决前后端路径冲突（Heroku直接访问异常的核心原因） #

你的前端页面路由和后端API路径都是/attendees，本地开发时webpack dev server默认开启了history回退规则，会返回前端index.html；但Heroku部署时如果后端没有配置对应规则，直接访问/attendees时后端会直接返回接口JSON数据，或者找不到页面。
两种修复方案选其一即可：

• 给所有后端API加统一前缀，比如将接口路径改成/api/attendees，前后端同步修改，完全避免路径冲突
• 配置后端路由规则，所有非API请求都返回前端的index.html，以Express为例，在所有API路由之后加如下配置：

const path = require('path');
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '你的前端build目录路径', 'index.html'));
});

4. 兼容浏览器返回缓存场景 #

从其他网站点击返回按钮时，部分浏览器会使用往返缓存（bfcache），可能导致组件挂载逻辑不触发，修改useEffect增加页面显示事件监听：

useEffect(() => {
  const handlePageShow = () => getAttendees();
  window.addEventListener('pageshow', handlePageShow);
  getAttendees();
  return () => window.removeEventListener('pageshow', handlePageShow);
}, [])

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