为什么 useEffect 中的 .then() 没有更新我的状态

Question

targetMovie 在涉及到 rednering 时为 null。我找不到任何解决方案。第一次遇到无法解决的问题。请帮忙！

async function getMovie(id) {
  try {
    const res = await axios.get(apiEndPoint + "/" + id);
    const movies = await res.data;
    return movies;
  } catch (err) {
    console.log(err);
  }
}

const MovieEdit = () => {
  const { id } = useParams();
  const [targetMovie, setTargetMovie] = useState(null);

  useEffect(() => {
    getMovie(id)
      .then((mov) => {
        setTargetMovie(mov);
        console.log(mov);
      })
      .catch((err) => console.log(err));
  }, []);

  console.log(targetMovie);
  if (targetMovie) return <AddMovie movie={targetMovie} />;
  return <Navigate to="/not-found" />;
};

Answer 1

您需要代表 3 个状态：

1. 您目前正在等待 getMovie 完成
2. getMovie 成功完成
3. getMovie 完成并返回 null/undefined

   您当前使用相同的条件 (!targetMovie) 来表示 1. 和 3. 这就是您遇到问题的原因。

   尝试这个：

   const MovieEdit = () => {
     const { id } = useParams();
     const [isFetching, setIsFetching] = useState(true);
     const [targetMovie, setTargetMovie] = useState(null);
   
     useEffect(() => {
       getMovie(id)
         .then((mov) => {
           setIsFetching(false);
           setTargetMovie(mov);
           console.log(mov);
         })
         .catch((err) => {
           console.log(err));
           setIsFetching(false);
         }
     }, []);
   
     if (isFetching) return null;
   
     if (targetMovie) return <AddMovie movie={targetMovie} />;
   
     return <Navigate to="/not-found" />;
   };