javascript - ReactJS:当异步API数据获取完成时，我无法使用API​​数据更新状态

Question

在将状态设置为返回的异步 API 请求的数据之前，我在渲染组件时遇到了一些问题。我有一个fetch()触发的方法，从 API 返回数据，然后将状态设置为此数据。这是处理此问题的代码块:

class App extends Component {
  constructor() {
    super();
    this.state = {
      currentPrice: null,
    };
  }
    componentDidMount() {
        const getCurrentPrice = () => {
          const url = 'https://api.coindesk.com/v1/bpi/currentprice.json';

          fetch(url).then(data => data.json())
          .then(currentPrice => {
            this.setState = ({
              currentPrice: currentPrice.bpi.USD.rate
            })
            console.log('API CALL', currentPrice.bpi.USD.rate);
          }).catch((error) => {
            console.log(error);
          })
        }
       getCurrentPrice();
    } 

您会注意到 console.log('API CALL', currentPrice.bpi.USD.rate )，我用它来检查 API 数据是否正在返回，确实如此。 currentPrice.bpi.USD.rate按预期在控制台中返回一个整数(例如 2345.55)。

太好了，所以我假设 this.setState = ({ currentPrice: currentPrice.bpi.USD.rate })应该可以毫无问题地设置状态，因为该数据已成功接收回来。

所以我现在像这样渲染组件:

render() {
    return (
      <div>
        <NavigationBar />
        <PriceOverview data={this.state.currentPrice}/>
      </div>
    );
  }
}
export default App;

有了这个，我希望能够在我的 PriceOverview.js 中访问这些数据。像这样的组件:this.props.data

我用过console.log()检查this.props.data在我的里面PriceOverview.js组件，我得到“null”，因为这是我最初设置的默认值。我遇到的问题是组件在 API 获取运行之前渲染并使用返回的数据更新状态。那么当 App.js呈现PriceOverview.js组件，它只传递currentPrice: null到它，因为异步 fetch()渲染之前尚未返回数据。

我的困惑在于 this.setState 。我读到 React 会随时调用 render this.setState叫做。所以在我心里，曾经的fetch()请求返回，它调用 this.setState并将状态更改为返回的数据。这反过来会导致重新渲染，并且新的状态数据应该可用。如果我不说我在这里感到困惑，那我就是在撒谎。我假设一旦 fetch()返回后，它将使用请求的数据更新状态，然后触发重新渲染。

我在这里肯定缺少一些明显的东西，但我的经验不足让我独自一人......寒冷......在绝望的黑暗中。我在处理“硬编码”数据时没有问题，因为我可以很好地传递它，而不必担心它何时返回。例如，如果我将 App.js 中的状态设置为 this.state = { currentPrice: [254.55] } ，然后我可以在 PriceOverview.js 中访问它通过this.props.data零问题。正是异步 API 请求让我来到了这里，恐怕今晚我已经被它打败了。

这里是完整的 App.js:

import React, { Component } from 'react';
import './components/css/App.css';
import NavigationBar from './components/NavigationBar';
import PriceOverview from './components/PriceOverview';

class App extends Component {
  constructor() {
    super();
    this.state = {
      currentPrice: null,
    };
  }
  componentDidMount() {
    const getCurrentPrice = () => {
      const url = 'https://api.coindesk.com/v1/bpi/currentprice.json';

      fetch(url).then(data => data.json())
      .then(currentPrice => {
        this.setState = ({
          currentPrice: currentPrice.bpi.USD.rate
        })
        console.log('API CALL', currentPrice.bpi);
      }).catch((error) => {
        console.log(error);
      })
    }
    getCurrentPrice();
  }

render() {
    return (
      <div>
        <NavigationBar />
        <PriceOverview data={this.state.currentPrice}/>
      </div>
    );
  }
}
export default App;

这是完整的 PriceOverview.js:

import React, { Component } from 'react';
import './css/PriceOverview.css';
import bitcoinLogo from './assets/bitcoin.svg';

class PriceOverview extends Component {

    constructor(props) {
        super(props);
        this.state = {
            currentPrice: this.props.data
        }
    }

    render() {
     return (
          <div className="overviewBar">
            <div className="currentPrice panel">
                 { this.state.currentPrice != null ? <div className="price">{this.state.currentPrice}</div> : <div className="price">Loading...</div> }
            </div>
          </div>
    )
  }
}
export default PriceOverview;

提前感谢您提供的任何帮助，非常感谢。

Answer 1

 this.setState ({
          currentPrice: currentPrice.bpi.USD.rate
        })

请勿将 = 放入 this.setState