时间戳

首页 > 解决方案 > 对在两个单独的函数中使用“useState”感到困惑

reactjs - 对在两个单独的函数中使用“useState”感到困惑

问题描述

为了从我的 AWS Postgres DB 中获取数据，我必须首先获取一个 AWS 访问令牌并将其传递给 GET 调用。为此，在我的 React 应用程序中，我创建了一个名为的文件requests.js，我计划在其中构建许多函数。这是前两个：

// Custom hook to get AWS Auth Token
export const useGetAwsAuthToken = () => {
  const [data, setData] = useState();

  useEffect(() => {
    const fetchData = async function() {
      try {
        const config = {
          headers: { "Authorization":  
            await Auth.currentSession()
            .then(data => {
              return data.getAccessToken().getJwtToken();
            })
            .catch(error => {
            })
          }
        };
        setData(config);
      } catch (error) {
        throw error;
      } finally {
      }
    };
    fetchData();
  }, []);

  return { data };
};

// Custom hook for performing GET requests
export const useFetch = (url, initialValue) => {
  const [data, setData] = useState(initialValue);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async function() {
      try {
        setLoading(true);
        const response = await axios.get(url);
        if (response.status === 200) {
          setData(response.data);
        }
      } catch (error) {
        throw error;
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);

  return { loading, data };
};

我的印象是我可以const [data, setData] = useState();在这两个功能中使用它们并且它们将彼此独立。然而，回到我调用函数的地方，我的 IDE 告诉我第二次调用“数据已经被声明”：

  const {data} = useGetAwsAuthToken();
  const {loading, data} = useFetch('https://jsonplaceholder.typicode.com/posts');

此外，假设我注释掉上面的第二行代码并进行此调用：

const {data2} = useGetAwsAuthToken();

这data2未定义。这也令人困惑，因为我不应该能够在调用函数中有任何命名的返回值变量吗？

标签： reactjsreact-hooks

解决方案

首先，对我来说更容易回答的一个：const {data2} = useGetAwsAuthToken无效，因为您正在使用解构并且它期望数据的价值。所以你所说的相当于说const data2 = useGetAwsAuthToken().data2你真正想要的是const { data: data2 } = useGetAwsAuthToken()。这将采用返回的值 ( data) 并将其保存到当前作用域中data2。

现在是你提出的第一个问题。为什么你在看起来只是一个函数的地方使用反应生命周期？当它只是一个不返回 React 组件的函数时，您不需要将内容保存在 state 中。

推荐阅读