React中onClick首次点击Fetch API不生效，animeId未及时捕获求助

React的状态更新是异步批量处理的，调用SetAnimeId(event.currentTarget.id)后，animeId并不会立刻更新为新值。此时立刻执行modalAnime()，函数里使用的animeId还是更新前的旧值（可能是空字符串或之前的ID），导致首次请求用了错误的ID，表现为请求无效；第二次点击时，上一次的状态更新已经完成，animeId变成了正确值，所以请求正常。

另外你代码里fetch同时混用了await和.then()，写法不规范，容易导致逻辑混乱，建议统一用await配合try/catch处理异步请求。

提供两种可行方案，按需选择：

方案1：直接传递ID参数（推荐） #

不需要依赖状态，直接把点击事件里的ID传给modalAnime，避免异步状态更新的延迟问题：

1. 修改modalAnime函数，接收ID参数：

const modalAnime = async (id) => {
  try {
    const response = await fetch(`${base_url}/anime/${id}`);
    const data = await response.json();
    SetAnimeModalData(data);
  } catch (err) {
    console.error('请求动漫数据失败:', err);
  }
};

2. 更新modalOpen函数，直接传递获取到的ID：

const modalOpen = (event) => {
  const targetId = event.currentTarget.id;
  SetAnimeId(targetId);
  SetModalVisible(true);
  modalAnime(targetId);
  console.log(targetId); // 直接用变量，而非状态值
};

方案2：用useEffect监听状态变化 #

利用React的副作用钩子，监听animeId的变化，当状态更新完成后自动触发请求：

1. 添加useEffect钩子（需要先导入useEffect）：

import { useEffect } from 'react';

// ...其他代码

useEffect(() => {
  // 仅当animeId不为空时发起请求
  if (animeId) {
    modalAnime();
  }
}, [animeId]); // 依赖项为animeId，状态变化时执行副作用

2. 修改modalOpen函数，移除直接调用modalAnime的代码：

const modalOpen = (event) => {
  SetAnimeId(event.currentTarget.id);
  SetModalVisible(true);
};

3. 优化modalAnime的异步写法：

const modalAnime = async () => {
  try {
    const response = await fetch(`${base_url}/anime/${animeId}`);
    const data = await response.json();
    SetAnimeModalData(data);
  } catch (err) {
    console.error('请求动漫数据失败:', err);
  }
};

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