时间戳

首页 > 解决方案 > 打开 DrawerNavigation 时自动调用 API

javascript - 打开 DrawerNavigation 时自动调用 API

问题描述

我正在使用 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();
  }, []);

标签： javascriptreactjsreact-nativereact-navigationnavigation-drawer

解决方案

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

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

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

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

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

推荐阅读