反应上下文 - useEffect

Question

useEffect 正在监听上下文是否正确？

const {
  data,
} = useContext(AuthContext);

async function getProfile() {
    try {
      setLoading(true);
      console.info('getProfile called', data.token);
      const response = await getByToken(data.token);
      if (response && response.ok) {
        setFirstName(response.userData.firstName);
        setLastName(response.userData.lastName);
        setEmail(response.userData.email);
      }
    } catch (e) {
      console.info('Error', e);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    if (data.userData) {
      getProfile();
    }
  }, [data.userData]);

这是我发现使用不同于 null 的 userData 调用 getProfile 的方法

Answer 1

是的，它就是这样工作的。 尽管说useEffect正在监听变量的变化可能是不正确的。 由于满足两个条件， useEffect内部的回调运行：

1. 渲染发生。
2. 依赖数组具有不断变化的依赖

重新渲染是因为上下文值发生了变化，内部组件是Context的消费者（因为它调用了useContext）。 并且由于 useEffect 依赖数组中包含的依赖项也发生了变化，因此运行回调。

带有简单示例的沙盒链接