Axios GET请求返回正常却无法设置React State，状态值为undefined

1. 立刻console.log(movie)显示undefined的核心原因 #

React的状态更新是异步批量处理的，调用setMovie后，状态不会立刻完成更新。你在getData()执行后直接打印movie，此时组件还没触发重新渲染，拿到的是初始的空对象（或旧状态），并非真正的更新后的值。

要验证状态是否成功更新，正确的做法是：

• 在组件渲染逻辑中打印movie（比如return语句前）
• 或者用另一个useEffect监听movie的变化：

useEffect(() => {
  console.log("更新后的movie:", movie);
}, [movie]);

2. 确认状态是否真的未被设置 #

你已经通过console.log(response.data)验证了API返回正确数据，说明setMovie(response.data)的写法本身没问题，状态一定会被更新，只是你在错误的时机读取了它。

如果后续使用movie时出现undefined，大概率是因为初始状态是空对象，在数据还没请求回来时就尝试访问movie的属性（比如movie.title），这时候会返回undefined。解决方法是添加加载状态判断：

return (
  <div>
    {movie.id ? (
      <h1>{movie.title}</h1>
    ) : (
      <p>加载中...</p>
    )}
  </div>
);

3. 检查useEffect的依赖数组 #

你的useEffect依赖数组是空的，如果id是从props或其他状态获取的动态值，当id变化时，这个请求不会重新执行，可能导致拿到错误的数据。要确保依赖数组包含所有用到的外部变量：

useEffect(() => {
  // ... getData函数
  getData();
}, [id]); // 将id添加到依赖数组

修正后的完整代码示例 #

const [movie, setMovie] = useState({});

useEffect(() => {
  const baseURL = `https://api.themoviedb.org/3/movie/${id}?api_key=${API_KEY}`;
  async function getData() {
    try {
      const response = await axios.get(baseURL);
      console.log("API返回数据:", response.data);
      setMovie(response.data);
    } catch (error) {
      console.error("请求失败:", error);
    }
  }
  getData();
}, [id]); // 依赖数组添加id

// 监听movie变化，验证状态更新
useEffect(() => {
  console.log("当前movie状态:", movie);
}, [movie]);

// 组件渲染时处理加载状态
return (
  <div>
    {Object.keys(movie).length > 0 ? (
      <div>
        <h1>{movie.title}</h1>
        <p>{movie.overview}</p>
      </div>
    ) : (
      <p>正在加载影片信息...</p>
    )}
  </div>
);

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