React Hooks - 发出 Ajax 请求

Question

我刚开始玩 React hooks，想知道 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>
    )
}

原文由 peter flanagan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以创建一个名为 useFetch 的自定义挂钩，它将实现 useEffect 挂钩。

如果您将空数组作为第二个参数传递给 useEffect 挂钩将在 componentDidMount 上触发请求。通过在数组中传递 url 这将在 url 更新时随时触发此代码。

这是代码沙箱中的演示。

请参阅下面的代码。

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

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

  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>
    );
}

原文由 Paul Fitzgerald 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

工作得很好……给你：

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

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

  const fetchUser = async () => {
    const response = await fetch(url);
    const data = await response.json();
    const [user] = data.results;
    setData(user);
    setLoading(false);
  };

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

  return { data, loading };
};

const App = () => {
  const { data, loading } = useFetch('https://api.randomuser.me/');

  return (
    <div className="App">
      {loading ? (
        <div>Loading...</div>
      ) : (
        <React.Fragment>
          <div className="name">
            {data.name.first} {data.name.last}
          </div>
          <img className="cropper" src={data.picture.large} alt="avatar" />
        </React.Fragment>
      )}
    </div>
  );
};

现场演示：

编辑

根据版本更改进行更新（感谢@mgol 在评论中引起我的注意）。

原文由 SakoBu 发布，翻译遵循 CC BY-SA 4.0 许可协议