React组件登出后仍显示API旧数据问题排查求助

1. 状态未主动重置：当Token为空时，API返回空对象，此时res.data中不存在question和options字段，代码里的条件判断会跳过setPollQuestion和setPollOptions调用，导致组件保留之前的投票数据状态。
2. useEffect触发条件不足：如果登出操作没有修改Polls组件接收的props，那么依赖props的useEffect不会自动触发，即使手动调用loadPolls，也可能因为状态更新逻辑的问题无法清空数据。

1. 强制重置状态，处理空数据场景 #

修改loadPolls函数，在处理API返回数据前先重置投票状态，确保空数据时能清空页面内容：

const loadPolls = async () => {
  setLoading(true);
  try {
    const response = await fetch("http://localhost:3003/poll", {
      method: "GET",
      headers: {
        "Accept": "application/json",
        "Content-Type": "application/json",
        "Token": sessionStorage.getItem('user')
      }
    });
    const resData = await response.json();
    
    // 先重置状态，再根据返回数据更新
    setPollQuestion(null);
    setPollOptions([]);
    
    if ('question' in resData.data) {
      setPollQuestion(resData.data.question);
    }
    if ('options' in resData.data) {
      setPollOptions(resData.data.options);
    }
  } catch (error) {
    console.error('加载投票数据失败:', error);
    // 出错时也重置状态
    setPollQuestion(null);
    setPollOptions([]);
  } finally {
    setLoading(false);
  }
};

这里做了三个优化：

• 改用async/await的标准写法，避免then嵌套
• 请求开始时就设置loading，逻辑更清晰
• 无论API返回空数据还是请求失败，都强制重置投票状态，确保页面内容被清空

2. 确保登出时触发组件更新 #

如果登出操作没有修改Polls的props，可以在父组件中添加一个authStatus状态，登录/登出时更新该状态并传递给Polls，让useEffect依赖这个状态：

// 父组件示例
function App() {
  const [authStatus, setAuthStatus] = useState(!!sessionStorage.getItem('user'));
  
  // 登出函数示例
  const handleLogout = () => {
    sessionStorage.removeItem('user');
    setAuthStatus(false); // 更新状态触发Polls组件更新
  };
  
  return (
    <div>
      {/* 其他组件 */}
      <Polls authStatus={authStatus} />
    </div>
  );
}

// Polls组件修改useEffect依赖
useEffect(() => {
  loadPolls();
}, [props.authStatus]);

这样登出时authStatus从true变为false，会触发useEffect重新执行loadPolls，确保数据被重新加载并清空。

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