React函数组件中useEffect无法设置authToken状态的问题求助

你的代码存在几个关键问题，导致authToken状态无法正常设置或使用，以下是具体修复方案：

1. 修正Axios请求参数格式 #

axios.post的参数顺序是url, 请求体, 配置项，你错误地将headers放在了请求体的位置，这会导致请求头设置无效，后端可能无法正确返回token。修改后：

axios.post(`/api/auth/${personId}/location/${buildingId}`, {}, {
  headers: {
    'Content-Type': 'application/json',
  }
})

（用模板字符串拼接URL更易读，第二个参数传空对象，因为该POST请求不需要请求体）

2. 补全useEffect的依赖数组 #

你的useEffect依赖了props中的personId和buildingId，但依赖数组为空，会导致：

• 仅组件初始化时发起一次请求，后续props变化不会重新请求
• 闭包问题导致请求使用的是初始的personId/buildingId值
  补全依赖数组：

useEffect(() => {
  // 这里放请求代码
}, [personId, buildingId]);

3. 处理token未加载完成的状态 #

初始状态下authToken为undefined，直接访问authToken.token会抛出错误，同时需要等待请求完成后再渲染Editor组件：

const [authToken, setAuthToken] = useState(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
  axios.post(`/api/auth/${personId}/location/${buildingId}`, {}, {
    headers: {
      'Content-Type': 'application/json',
    }
  })
  .then((res) => {
    console.log('后端返回的token数据:', res.data); // 打印确认返回格式是否正确
    setAuthToken(res.data);
  })
  .catch(err => {
    console.error('请求token失败:', err);
  })
  .finally(() => {
    setLoading(false);
  });
}, [personId, buildingId]);

// 加载状态下显示占位内容
if (loading) {
  return <div>加载中...</div>;
}

return (
  <Editor
    init={{
      tinydrive_token_provider: function (success, failure) {
        if (!authToken?.token) {
          failure('Token 获取失败');
          return;
        }
        success({ token: authToken.token });
      }
    }}
  />
);

额外排查点 #

• 打开浏览器控制台，查看网络请求是否成功，后端返回的res.data格式是否包含token字段
• 确认后端接口是否正确处理了POST请求，返回预期的token数据

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