reactjs - 使用 API 调用更新状态 - React.js

Question

我正在尝试使用 API 调用更新 React.js 中的状态，因为我需要向最终用户显示一些数据。api 调用通过 localhost:5001 工作并存储在基于 Fire 的函数中。

import React, { Component } from 'react'
import './Table.css';


class Table extends Component {
  constructor (props)
  {
     super(props);
      this.state = {
         stocks: []
     };
 }

   componentDidMount() {
    fetch('localhost:5001') // Removed for stackoverflow //
    .then((response) => response.json())
    .then(stockList => {
        this.setState =
        ({ stocks: stockList });
    });
}

   render() {
      return (
         <div className='table'>
            <h1 id='title'>Companies</h1>
            {this.state.stocks.map(stocks => <h2 key={stocks.symbol}> {stocks.companyName}</h2>)}
         </div>
      )
   }
 }

export default Table;

以下是 API 调用的片段：

{"symbol":"AAPL","companyName":"Apple Inc"}

标签： reactjsfirebasegoogle-cloud-functionsstate

Answer 1

setState 是一个函数，因此您应该调用它，而不是为其赋值：

this.setState({ stocks: stockList });