打开抽屉导航时自动调用API答案

【问题标题】：Call API automatically when opening DrawerNavigation打开抽屉导航时自动调用API
【发布时间】：2021-02-21 07:00:20
【问题描述】：

我正在使用 useEffect 使用此 API 中的数据。只有在您第一次打开组件时才有效。

我想要的是，每次 API 中的数据发生变化。更改组件信息。

当我使用 useIsFocused 或 useFocusEffect 时，我收到错误：找不到导航对象。是导航器屏幕内的组件。

 const [infoUser, setInfoUser] = useState([]);

  const getNameUser = async () => {
    try {
      const accessToken = await AsyncStorage.getItem('@access_token');
      /* console.log('Token', accessToken); */

      axios
        .get(
          'https://exampleapi/api/cliente',
          {
            headers: { Authorization: `Bearer ${accessToken}` },
          },
        )
        .then(function (response) {
          // handle success
          console.log('DADOS USER:', response.data.data.nomeCompleto);
          const userData = response.data.data;

          setInfoUser([userData]);
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    } catch (e) {
      // error reading value
      console.log('Erro de token', e);
    }
  };

useEffect(() => {
    getNameUser();
  }, []);

【问题讨论】：

你能用你使用焦点钩子的代码发布整个组件吗？如果您想在每次屏幕获得焦点时调用 API，这是最直接的方法，并且应该可以工作。

标签： javascript reactjs react-native react-navigation navigation-drawer

【解决方案1】：

通过像这样传递空数组来使用 useEffect 钩子：

useEffect(() => {
    getNameUser();
  }, []);

给它一个空数组就像 componentDidMount 一样，它只运行一次。

不给它第二个参数充当 componentDidMount 和 componentDidUpdate，因为它首先在挂载时运行，然后在每次重新渲染时运行例如：

useEffect(() => {
    getNameUser();
  });

【讨论】：