Saya mencoba merender nilai pengembalian sederhana dari fungsi async di aplikasi reaksi saya, namun setiap kali saya mencoba seluruh aplikasi saya tidak akan merender sama sekali. Tanpa memanggil fungsi yang dirender oleh aplikasi saya dengan baik. ...

1
Jerry123 5 April 2021, 19:03

1 menjawab

Jawaban Terbaik

Isu

Komponen dan siklus hidup React 100% sinkron, terutama metode render. Metode render juga dianggap sebagai fungsi murni, artinya metode ini tidak memiliki efek samping (seperti mengambil data!!).

Larutan

Anda harus memfaktorkan ulang kode Anda untuk mengambil data di salah satu atau kedua componentDidMount dan componentDidUpdate dan menyimpan hasilnya ke status komponen lokal untuk rendering.

Berikut adalah contoh refactorization.

class TitleCards extends Component {
  constructor(props){
    super(props);

    state = {
      portfolioTotal: '',
    };

    this.totalPortfolio = this.totalPortfolio.bind(this);
    this.getIntradayPrice = this.getIntradayPrice.bind(this);
  }

  async getIntradayPrice(tick) {
    const resp = await fetch(`${IEX.base_url}/stock/${tick}/intraday-prices?chartLast=1&token=${IEX.api_token}`);
    return resp.json();
  }

  async totalPortfolio() {
    const { info } = this.props;
    const respPromises = info.map(({ tick }) => this.getIntradayPrice(tick));
    const respArrays = await Promise.all(respPromises);
    const result = respArrays.reduce((acc, val, index) => acc + val[0].close * info[index].amtPurch, 0)
    return result;
  }

  // When the component mounts, call totalPortfolio
  componentDidMount() {
    this.totalPortfolio()
      .then(portfolioTotal => {
        this.setState({
          portfolioTotal
        });
      })
      .catch(error => {
        // add any required error handling/messaging here
      });
  }

  render() {
    const { portfolioTotal } = this.state;
    return(
      return(
        <div className="positioning">
          <div className="StockCardTitle">
            <img src={Folder} className="StockCardTitle-image" /> 
            {portfolioTotal} // <-- render state value
          </div>
        </div>
    );
  }
}
1
Drew Reese 5 April 2021, 19:14