根据 state 变量运行 useEffect 挂钩的正确方法是什么？

Question

I am writing a camera app. So when the user goes to the camera page they are provided with the option to grant camera permissions or not. I am saving their decision in variable const [hasPermission, setHasPermission] = useState(null); My current use effect function:

useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      const audioPermissions = await Audio.requestPermissionsAsync();
      if (
        cameraPermissions.status === "granted" &&
        audioPermissions.status === "granted"
      ) {
        setHasPermission(true);
      }
    })();
  }, []);

This currently works correctly when the user runs the app for the very first time - they grant permission, and thats it - I can use the camera!

However..... what if they dont grant permission. They ecide not to use the camera, they deny access and later on they change their mind.. For instance 5 mins later, they open the "camera" page again and want to grant a permission. Here is my problem. As it is in the current situation useEffect , ie the request to use the camera will show only once, when you initially load the page. How do I force it to pop up again if the user hasnt granted permissions yet?

I tried the following:

useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      const audioPermissions = await Audio.requestPermissionsAsync();
      if (
        cameraPermissions.status === "granted" &&
        audioPermissions.status === "granted"
      ) {
        setHasPermission(true);
      }
    })();
  }, [hasPermission === null]);

but it didnt work. Any suggestions?

Answer 1

You only need to pass the variable that matters. No need to check anything else.

  }, [hasPermission]);