Как сделать вызовы API в Rejjj новый хук API и поделиться этим между компонентами? - PullRequest
Новая
       8

Как сделать вызовы API в Rejjj новый хук API и поделиться этим между компонентами?

0 голосов
/ 27 октября 2018

Как вызвать restApi в новом api hookj реагирования. И повторно использовать данные, используя 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)
}

1 Ответ

0 голосов
/ 27 октября 2018

Вы можете создать пользовательский хук, который создает новый элемент состояния 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>
...