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


