Не могу установитьState при использовании fetch даже с функцией стрелки - PullRequest
Новая
       18

Не могу установитьState при использовании fetch даже с функцией стрелки

0 голосов
/ 28 марта 2019

Я новичок в реагировании, и я пытался работать с api fetch.Я хочу получить некоторые данные о населении из API.Мне удалось получить данные, но когда я пытаюсь установить 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;

1 Ответ

0 голосов
/ 28 марта 2019

Вы хотите вызвать выборку в componentDidMount. К моменту вызова componentDidMount компонент уже визуализируется.

На практике componentDidMount является лучшим местом для вызовов для извлечения данных по двум причинам: Использование didMount дает понять, что данные не будут загружены до окончания первоначального рендеринга. Это напоминает вам о правильной настройке начального состояния, поэтому вы не получите неопределенное состояние, которое вызывает ошибки.

Если вам когда-либо понадобится отобразить ваше приложение на сервере, componentWillMount будет фактически вызываться дважды - один раз на сервере и снова на клиенте - что, вероятно, не то, что вам нужно. Ввод кода вызова API в componentDidMount обеспечит получение данных только от клиента, где и должно быть.

...