React中useEffect内调用useState无法更新状态问题求助

问题代码 #

import axios from "axios";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

//useparam url theke niye nei

export default function MoviePage() {
  const [currentMovie, setcurrentMovie] = useState();
  const { id } = useParams();
  //data dibo id diye ekhon data gulo nibo

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.post("http://localhost:5000/MoviePage", {
          id: id,
        });
        console.log(response.data);
        setcurrentMovie(response.data.rows);
      } catch (error) {
        console.error("Error fetching data", error);
      }
    };

    fetchData();
  }, []); // Added id to the dependency array

  useEffect(() => {
    console.log(currentMovie);
  }, [currentMovie]);


  return (
    <div></div>

    );
}  

问题分析 #

核心问题是useEffect依赖数组配置错误：虽然代码注释提到要把id加入依赖数组，但实际写的是空数组[]。这会引发两个关键问题：

1. 闭包陷阱：effect内部捕获的id是组件初始渲染时的值，即使后续路由参数id更新，effect也不会重新执行，导致无法获取最新数据更新状态；
2. 初始化风险：如果组件挂载时路由参数id还未完成解析，请求会携带undefined的id，后续也不会自动重新发起请求。

另外，初始状态useState()未指定默认值，默认是undefined，不利于区分“未加载”和“加载完成但无数据”的状态。

解决方案 #

修改代码中的三个关键点：

1. 将id加入第一个useEffect的依赖数组，确保id变化时自动重新发起请求；
2. 给状态设置明确的初始值（比如null），便于状态判断；
3. 渲染时添加加载状态提示，提升体验。

修改后的代码：

import axios from "axios";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

export default function MoviePage() {
  // 显式设置初始状态为null，替代默认的undefined
  const [currentMovie, setcurrentMovie] = useState(null);
  const { id } = useParams();

  useEffect(() => {
    // 当id不存在时，不发起请求
    if (!id) return;
    
    const fetchData = async () => {
      try {
        const response = await axios.post("http://localhost:5000/MoviePage", { id });
        console.log("接口返回数据：", response.data);
        console.log("要设置的rows数据：", response.data.rows);
        setcurrentMovie(response.data.rows);
      } catch (error) {
        console.error("获取数据失败", error);
      }
    };

    fetchData();
  }, [id]); // 加入id到依赖数组，确保id变化时重新请求

  useEffect(() => {
    console.log("当前currentMovie状态：", currentMovie);
  }, [currentMovie]);

  // 渲染时处理加载状态
  if (!currentMovie) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      {/* 这里可以渲染currentMovie的数据，示例： */}
      <h1>{currentMovie.title}</h1>
      <p>{currentMovie.description}</p>
    </div>
  );
}  

额外验证建议 #

如果修改后状态仍未更新，可以在setcurrentMovie之前再次打印response.data.rows，确认该值确实存在且格式符合预期。同时可以打开React DevTools，直观查看状态是否被正确设置。

内容的提问来源于stack exchange，提问作者HILLOL CHAKMA Pollux-379