javascript - 如何在 reactjs new hook api 中进行 api 调用并在组件之间共享？

Question

如何在新的 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)
}

Answer 1

您可以创建一个自定义挂钩，该挂钩会创建您在网络请求完成时设置的新状态advice。

useEffect当使用它的组件重新渲染或组件被卸载时，从给定的函数返回一个取消您的请求的函数。您还可以将您的urlin 数组作为第二个参数，以便仅在实际更改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>