如何确保第二个axios请求执行时userid不为null？

核心问题确实是获取用户ID的异步请求与获取用户物品的请求并行执行，userid还未被更新为有效值就被代入了请求URL，导致无效请求。以下是几种直接可行的解决方式：

方案1：在请求前校验userid有效性 #

修改fetchUserItem，先判断userid是否存在，不存在则终止请求：

const fetchUserItem = async () => {
  // 先校验userid是否已获取
  if (!userid) {
    console.log('用户ID未就绪，无法发起请求');
    return;
  }

  try {
    const owner = await axios({
      url: `${baseUrl}/additem/owner/${userid}`,
      method: 'get'
    });
    const { events } = owner.data;
    console.log(owner.data);
    setitemList(events);
  } catch (err) {
    console.log('请求出错:', err);
  }
};

方案2：依赖userid自动触发请求 #

如果需要页面加载时自动获取用户物品，可将fetchUserItem放入监听userid变化的useEffect中，确保userid更新后再发起请求：

const [userid, setUserid] = useState(null);
const [itemList, setitemList] = useState([]);

// 获取用户ID的逻辑保留
useEffect(() => {
  (async () => {
    try {
      const resp = await httpClient.get("//localhost:5000/@me");
      setUserid(resp.data.id);
      console.log(resp.data.id);
    } catch (error) {
      console.log("Not authenticated");
    }
  })();
}, []);

// 监听userid变化，就绪后自动请求用户物品
useEffect(() => {
  const fetchUserItem = async () => {
    if (!userid) return;
    try {
      const owner = await axios({
        url: `${baseUrl}/additem/owner/${userid}`,
        method: 'get'
      });
      const { events } = owner.data;
      console.log(owner.data);
      setitemList(events);
    } catch (err) {
      console.log('请求出错:', err);
    }
  };

  fetchUserItem();
}, [userid]); // 依赖userid，值变化时执行

方案3：UI层面限制触发操作 #

如果fetchUserItem是由用户操作（比如按钮点击）触发，可在UI上禁用操作直到userid就绪：

<button onClick={fetchUserItem} disabled={!userid}>
  获取我的物品
</button>

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