在 react-native 功能组件中处理 401 响应

Question

I'm getting the following warning when an API request returns 401 and I send the user to the login screen:

Warning: Can't perform a React state update on an unmounted component.

What is the best way to handle this warning in a functional component that uses hooks. See the code below:

.
.
export default function MovieDetailsScreen() {
  const [movie, setMovie] = useState({});
  const movieId = useNavigationParam('movieId');

  useEffect(() => {
    // This is the method that does the request and returns 401 (It
    // uses the fetch library) 
    Client.movies.show(movieId) 
      .then(result => {
        setMovie(result)
      })
  }, [])
.
.
.

Answer 1

In general, warnings don't crash your application. But you should care about them. For instance, the previous warning(s) can lead to performance issues when not properly unmounting your stateful components

the request (eg Promise ) isn't resolved yet, but you unmount the component. Then the request resolves, setMovie() is called to set the new state, but it hits an unmounted component.

You can try catch

    Client.movies.show(movieId) 
      .then(result => {
        setMovie(result)
      })
    .catch((err) => {
        Client.movies.stop()
    })