React Hooks-发出Ajax请求

Question

我刚刚开始玩React钩子，想知道AJAX请求的外观如何？

我已经尝试了很多尝试，但是无法使其正常工作，并且也不太了解实现它的最佳方法。以下是我的最新尝试：

import React, { useState, useEffect } from 'react';

const App = () => {
    const URL = 'http://api.com';
    const [data, setData] = useState({});

    useEffect(() => {
        const resp = fetch(URL).then(res => {
          console.log(res)
        });
    });

    return (
        <div>
          // display content here
        </div>
    )
}

Answer 1

您可以创建一个自定义钩子useFetch，该useEffect钩子将实现该钩子。

通过将空数组作为第二个参数传递给useEffect钩子，将触发上的请求componentDidMount。

这是代码沙箱中的演示。

请参见下面的代码。

import React, { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);

  // empty array as second argument equivalent to componentDidMount
  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url);
      const json = await response.json();
      setData(json);
    }
    fetchData();
  }, [url]);

  return data;
};

const App = () => {
    const URL = 'http://www.example.json';
    const result = useFetch(URL);

    return (
      <div>
        {JSON.stringify(result)}
      </div>
    );
}