Question

为了从我的AWS Postgres DB中获取数据，我必须首先获取一个AWS Access Token并将其传递到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保留为未定义。这也很令人困惑，因为我不应该在调用函数中拥有任何命名的返回值变量吗？

Answer 1

首先，一个对我来说更容易回答的问题：const {data2} = useGetAwsAuthToken是无效的，因为您正在使用解构，并且它期望数据的价值。因此，您所说的等同于说const data2 = useGetAwsAuthToken().data2，而您真正想要的是const { data: data2 } = useGetAwsAuthToken()。这将使用返回的值（data）并将其另存为data2到当前范围。

现在您提出的第一个问题。为什么在似乎只是功能的情况下使用反应生命周期？当它只是一个不返回React Component的函数时，您无需将状态保存。

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

1 个答案: