React SetState 没有更新答案

【问题标题】：React's SetState is not updatingReact SetState 没有更新
【发布时间】：2020-07-26 17:42:16
【问题描述】：

我正在尝试使用 react 制作货币转换器。

我向 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

【问题讨论】：

这能回答你的问题吗？ stackoverflow.com/questions/53332321/…
没有。我实际上不确定为什么会导致这种情况。它仍然是相同的，未定义的。

标签： reactjs api fetch react-hooks

【解决方案1】：

获取数据需要一些时间，因为该函数是异步的，并且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;

【讨论】：

非常感谢。现在我有点明白发生了什么。谢谢！
太棒了。很高兴它有帮助。

【解决方案2】：

setState 异步运行，因此，您在 setState 完成设置状态之前注销数据。所以，尝试以下修改 -

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.

【讨论】：