React SetState не обновляется - PullRequest
Новая
       15

React SetState не обновляется

0 голосов
/ 14 апреля 2020

Я пытаюсь сделать конвертер валют с помощью реакции.

Я делаю запрос в API, и я получил то, что мне нужно. Но когда я пытаюсь установить состояние, это дает неопределенное. Я пробовал чужой код, но он все еще не работает.

Вот код 

import React from 'react';

const API_URL = {MY API URL};

function App() {
  ///////////IMPORTANT////////////
  const [currency, setCurrency] = useState(); 

  //The function to actually make the fetch or request
  function makeApiRequest() {
    fetch(API_URL)
      .then(res => res.json())
      .then(data => {
        setCurrency(data); //Sets currency to data
      });
  }

  //Makes a request to the API
  useEffect(() => {
    makeApiRequest();
    console.log(currency); //Outputs 'undefined'
  }, [])

  ///////////IMPORTANT////////////

  return (
    <h1>Currency Converter</h1>
  );
}

, ошибок нет, и вот какие данные возвращает 

{rates: {…}, base: "EUR", date: "2020-04-09"}
base: "EUR"
date: "2020-04-09"
rates:
AUD: 1.7444
BGN: 1.9558
BRL: 5.5956
CAD: 1.5265
CHF: 1.0558
CNY: 7.6709
CZK: 26.909
DKK: 7.4657
GBP: 0.87565
HKD: 8.4259
HRK: 7.6175
HUF: 354.76
IDR: 17243.21
ILS: 3.8919
INR: 82.9275
ISK: 155.9
JPY: 118.33
KRW: 1322.49
MXN: 26.0321
MYR: 4.7136
NOK: 11.2143
NZD: 1.8128
PHP: 54.939
PLN: 4.5586
RON: 4.833
RUB: 80.69
SEK: 10.9455
SGD: 1.5479
THB: 35.665
TRY: 7.3233
USD: 1.0867
ZAR: 19.6383

Ответы [ 2 ]

0 голосов
/ 14 апреля 2020

setState выполняется асинхронно, поэтому вы выходите из системы до того, как setState завершает sh установку состояния. Итак, попробуйте следующие модификации - 

import React from 'react';

const API_URL = {MY API URL};

function App() {
 ///////////IMPORTANT////////////
 const [currency, setCurrency] = useState(); 

 //The function to actually make the fetch or request
 function makeApiRequest() {
   fetch(API_URL)
     .then(res => res.json())
     .then(data => {
       setCurrency(data); //Sets currency to data
     });
 }
makeApiRequest();
 //Makes a request to the API
 useEffect(() => {
   console.log(currency); //Outputs 'undefined'
 }, [currency]) //so that this useEffect hooks only runs when the currency changes

 ///////////IMPORTANT////////////

 return (
   <h1>Currency Converter</h1>
 );
}```



You can change back to you're code once you know that setState is working.
0 голосов
/ 14 апреля 2020

Для извлечения данных требуется некоторое время, так как функция асинхронная и useEffect запускается после того, как начальное рисование было зафиксировано на экране, поэтому при начальном рендеринге currency не определено. Попробуйте этот подход. 

import React, { useEffect, useState } from "react";

const API_URL = {MY_API_URL};

function App() {
  ///////////IMPORTANT////////////
  const [currency, setCurrency] = useState();

  //The function to actually make the fetch or request
  async function makeApiRequest() {
    const response = await (await fetch(API_URL)).json();
    setCurrency(response);
  }

  //Makes a request to the API
  useEffect(() => {
    makeApiRequest();
  }, []);

   if (currency) {
      console.log(currency);
    }

  return <h1>Currency Converter</h1>;
}

export default App;
...