时间戳

首页 > 解决方案 > 即使使用箭头功能也无法设置状态

reactjs - 即使使用箭头功能也无法设置状态

问题描述

我是 react 初学者，我尝试使用 fetch api。我想从 api 获取一些关于人口的数据。我已经设法检索数据，但是当我尝试在 fetch 中设置 setState 时，图表不会使用新数组进行更新。以下是我的 app.js 代码，希望这是足够的信息：

class App extends Component {

  constructor(){
    super();
    this.state = {
      chartData:{}
    }
  }

  componentWillMount(){
    this.getChartData();
  }

  getChartData(){
    let queryPost = {
    "query": [
      {
        "code": "Region",
        "selection": {
          "filter": "vs:RegionLän07",
          "values": [
            "01"
          ]
        }
      },
      {
        "code": "ContentsCode",
        "selection": {
          "filter": "item",
          "values": [
            "BE0101N1"
          ]
        }
      }
    ],
    "response": {
      "format": "json"
    }
    }

    fetch('https://api.scb.se/OV0104/v1/doris/sv/ssd/START/BE/BE0101/BE0101A/BefolkningNy'
    ,{
    method:'post',
    body:JSON.stringify(queryPost),
    })

    .then(response => response.json())
    .then(result => result.data.map(obj => (
    parseInt(obj.values[0])
    )))
    .then(newArr => this.setState({chartData:{
      labels:['dsa','cava','daba','baba'],
      datasets:[
        {
        label:'Populations',
        data: [newArr[0],newArr[1],newArr[2]],
        backgroundColor:[
            'rgba(255,99,132,0.6)',
            'rgba(100,100,2,0.6)',
            'rgba(10,100,2,0.6)',
        ],
        }
      ]
    }},console.log(this.state.chartData))
    )}   

  render(){
    return (
    <div className="content">
      <div className="row justify-content-center align-items-center header">
        <h1>Befolkningsinfo</h1>
      </div>
      <div className="row">
        <div className="col-md-6 col-sm-12">
          <div className="App">

          </div>
        </div>
        <div className="col-md-6 col-sm-12">
          <div className="App">
            <BarChart chartData={this.state.chartData} title='Chart1'/>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col-md-6 col-sm-12">
          <div className="App">

          </div>
        </div>
        <div className="col-md-6 col-sm-12">
          <div className="App">
            <PieChart chartData={this.state.chartData} title='Chart2'/>
          </div>
        </div>
      </div>
    </div>
    )
  }
}

export default App;

标签： reactjsfetchreact-chartjs

解决方案

您想调用 fetch in componentDidMount。到componentDidMount调用的时候，组件已经被渲染了一次。

实际上，componentDidMount它是调用获取数据的最佳位置，原因有两个： 使用 didMount 可以清楚地表明，在初始渲染之前不会加载数据。这会提醒您正确设置初始状态，这样您就不会出现导致错误的未定义状态。

如果你需要在服务器上渲染你的应用程序，componentWillMount实际上会被调用两次——一次在服务器上，一次在客户端上——这可能不是你想要的。将您的 API 调用代码放入componentDidMount将确保仅从客户端获取数据，它应该在哪里。

推荐阅读