Why .then() which is in useEffect is not updating my state

Question

targetMovie is null when it comes to rednering. I couldn't find any solutions. First time having unsolvable problem. Please help!

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" />;
};

It's not clear what the problem is. Can you please [edit] your question to describe what you expect to see vs what you actually see. Does your logging show what you expect? — Phil, Nov 14 '22 at 23:10
Feels clear to me. OP thinks `` is being rendered with a null `targetMovie`. — V Maharajh, Nov 14 '22 at 23:13
Does this answer your question? [The useState set method is not reflecting a change immediately](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately) — Konrad, Nov 14 '22 at 23:26
Ah, you're using `` from react-router. I think you should read the docs for that component ~ https://reactrouter.com/en/main/components/navigate — Phil, Nov 14 '22 at 23:30
Just FYI a more accurate title would be something more along the lines of "Why is my component navigating away from the page prior to fetching data?" The initial `targetMovie` state is falsey so the `Navigate` component is rendered the and navigation action is effected on the initial render. — Drew Reese, Nov 15 '22 at 00:21

score 2 · Accepted Answer · answered Nov 14 '22 at 23:20

2

You need to represent 3 states:

You're currently waiting on getMovie to complete
getMovie completed successfully
getMovie completed and returned null/undefined

You're currently using the same condition (!targetMovie) to represent both 1. and 3. which is why you're running into issues.

Try this:

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" />;
};

answered Nov 14 '22 at 23:20

V Maharajh

9,013
5
30
31

1

Note that I'd recommend using something like react-query (https://tanstack.com/query/v4/docs/overview) to actually implement the logic of fetching stuff. – V Maharajh Nov 14 '22 at 23:21
2

I'd suggest also adding the missing `id` variable to the dependency array of the `useEffect` hook so when it updates the relevant movie data can again be fetched. – Drew Reese Nov 15 '22 at 00:25
isFetching state solved it. Adding id to the dependencies of useEffect was also helpful. Thanks a lot – Ali Ahmadi Nov 15 '22 at 12:18

Why .then() which is in useEffect is not updating my state

1 Answers1