如何在新的 reactjs hook api 中调用 restApi。并使用 useEffects 和 useState 重用数据？我只想跨组件重用数据。
import { useState, useEffect } from "react";
export default function getAdvice(url) {
fetch(`http://api.adviceslip.com/advice`)
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.log(err)
}
您可以创建一个自定义挂钩，以创建advice您在网络请求完成时设置的新状态。
useEffect当使用它的组件重新渲染或卸载组件时，从给定的函数中返回一个取消您的请求的函数。您还可以将url数组作为第二个参数，useEffect以便仅在url实际更改时重新运行网络请求。
例子
const { useState, useEffect } = React;
function useAdvice(url) {
const [advice, setAdvice] = useState(null);
useEffect(
() => {
const timeout = setTimeout(() => {
setAdvice(`Use ${url} to get some nice advice`);
}, 1000);
return () => clearTimeout(timeout);
},
[url]
);
return advice;
}
function App() {
const advice = useAdvice("https://google.com");
return <div>{advice}</div>;
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>