useEffect中的.then()无法更新state，渲染时targetMovie为null求助

以下是针对你遇到问题的具体排查和修复方案：

• 补全useEffect的依赖项
  你的useEffect依赖数组是空的[]，但组件逻辑依赖useParams返回的id。如果id在组件挂载后才被正确获取，或者后续路由参数有变化，空依赖的useEffect不会重新执行，导致请求永远发不出去。把id加入依赖数组：

  useEffect(() => {
    getMovie(id)
      .then((mov) => {
        setTargetMovie(mov);
        console.log(mov);
      })
      .catch((err) => console.log(err));
  }, [id]); // 加入id作为依赖
  

• 修复getMovie的错误处理逻辑
  当前getMovie的catch块只打印错误，但没有抛出异常，导致即使请求失败，then仍会执行，此时mov是undefined，调用setTargetMovie后targetMovie还是null。同时res.data不需要额外await，axios已经自动解析了响应体：

  async function getMovie(id) {
    try {
      const res = await axios.get(`${apiEndPoint}/${id}`);
      return res.data;
    } catch (err) {
      console.log(err);
      throw err; // 抛出错误，让组件的catch分支处理
    }
  }
  

• 添加加载状态，避免过早跳转
  异步请求需要时间，初始渲染时targetMovie是null，直接跳转到/not-found会导致请求完成后组件已经卸载，无法更新状态。新增加载状态优化逻辑：

  const MovieEdit = () => {
    const { id } = useParams();
    const [targetMovie, setTargetMovie] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
  
    useEffect(() => {
      const fetchMovie = async () => {
        try {
          const mov = await getMovie(id);
          setTargetMovie(mov);
        } catch (err) {
          console.log(err);
        } finally {
          setIsLoading(false); // 请求无论成败都结束加载
        }
      };
      fetchMovie();
    }, [id]);
  
    if (isLoading) return <div>加载中...</div>;
    if (targetMovie) return <AddMovie movie={targetMovie} />;
    return <Navigate to="/not-found" />;
  };
  

• 验证API返回结果
  检查console.log(mov)的输出，如果是null或undefined，说明后端接口没有返回预期的电影数据。确认apiEndPoint地址是否正确、id参数是否有效，以及后端接口的响应格式是否符合预期。

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