Как сделать вызовы api в новом api перехвата responsejs и поделиться им между компонентами?

Как вызвать restApi в новом api хука reactjs. И повторно использовать данные с помощью 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.info(res))
        .catch(err => console.info(err)
}

Да, конечно, спасибо за быстрый ответ.

— 30.10.2018 12:16

javascript reactjs react-hooks

27.10.2018 13:40

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 109

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете создать настраиваемую ловушку, которая создает новую часть состояния 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/[email protected]/umd/react.production.min.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id = "root"></div>

27.10.2018 14:02

Другие вопросы по теме

Почему require не ведет себя так же, как import, если задана такая же структура

Как отобразить данные из mongodb на стороне клиента?

Длинное целое число Javascript с сервера неточно

ReactJS и socket.io с экспресс-сеансом - сокет не использует правильный сеанс и создает множество других

Гарнитура-робот для чего?

Как передать реквизиты базовому компоненту в стилизованном компоненте?

React используйте setState для обновления книжной полки

Добавить babel с помощью webpack 4 React

Реагировать на отображение неожиданного числа

Как / что мне использовать в Node для очистки <video> src?

Как сделать вызовы api в новом api перехвата responsejs и поделиться им между компонентами?

Ответы 1

Другие вопросы по теме

Похожие вопросы