React Hooks-发出Ajax请求

  • Z时代
  • 2024-01-10
  • 分类：问答

我刚刚开始玩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>
    )
}

回答：

您可以创建一个自定义钩子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>
    );
}

以上是 React Hooks-发出Ajax请求 的全部内容， 来源链接： utcz.com/qa/425334.html

回到顶部