Javascript 新的反应-使用Fetch

我刚开始学习反应，所以请记住这一点。我试图使用fetch从公共api中提取数据，然后将其放在setState中的“label”部分。我使用的是chart.js，所以我正在寻找一个标签，以便根据api将纽约市的五个行政区纳入其中。问题在于fetch和setState之间的数据传输。我能很好地获取数据。我已经尝试了一些方法，非常感谢您的帮助

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

componentWillMount(){
  this.getChartData();
}

getChartData(){
  // Ajax calls here

  fetch("https://data.cityofnewyork.us/resource/27iv-9uub.json") 
  .then(response => response.json())
  .then(data => {
    // eslint-disable-next-line
    let boroughs = data.map((data) => {
      console.log(data.borough);
      return data.borough;
    })
    console.log(boroughs);
    return boroughs;
  })
  .catch(() => { 
    console.log("Promise Rejected"); 
  });
  let labels = boroughs;
  console.log(labels, 'test');
  this.setState({
    chartData:{
      labels: labels,
      datasets:[
        {
          label:'Population',
          data:[
            617594,
            1810450,
            153060,
            106519,
            105162
          ],
          backgroundColor:[
            'rgba(255, 99, 132, 0.6)',
            'rgba(54, 162, 235, 0.6)',
            'rgba(255, 206, 86, 0.6)',
            'rgba(75, 192, 192, 0.6)',
            'rgba(153, 102, 255, 0.6)',
            'rgba(255, 159, 64, 0.6)'
          ]
        }
      ]
    }
  });
}

---

在这种特殊情况下，

this.setState

需要在承诺成功时接收数据的

then

内部调用

比如说：

fetch("https://data.cityofnewyork.us/resource/27iv-9uub.json") 
  .then(response => response.json())
  .then(data => {
    this.setState({...});
    return data;
  })
  .catch(() => { 
    console.log("Promise Rejected"); 
  });

---

这里最基本的问题是，在

回调中解决承诺之前，您没有
自治区
。
将这一行放入
构造函数

this.getChartData = this.getChartData.bind(this);

您应该在API调用的
then函数
中设置状态，在进行ajax调用时使用
componentDidMount（）
lifecycle钩子是一种很好的做法

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

componentDidMount(){
  this.getChartData();
}

getChartData(){
  // Ajax calls here

fetch("https://data.cityofnewyork.us/resource/27iv-9uub.json") 
  .then(response => response.json())
  .then(data => {
    // eslint-disable-next-line
    let boroughs = data.map((data) => {
      console.log(data.borough);
      return data.borough;
    })

    this.setState({
      chartData:{
        labels: boroughs,
        datasets:[
          {
            label:'Population',
            data:[
              617594,
              1810450,
              153060,
              106519,
              105162
            ],
            backgroundColor:[
              'rgba(255, 99, 132, 0.6)',
              'rgba(54, 162, 235, 0.6)',
              'rgba(255, 206, 86, 0.6)',
              'rgba(75, 192, 192, 0.6)',
              'rgba(153, 102, 255, 0.6)',
              'rgba(255, 159, 64, 0.6)'
            ]
          }
        ]
      }
    });
  })
  .catch(() => { 
    console.log("Promise Rejected"); 
  });
}

最好将API调用移动到
componentDidMount
而不是
componentWillMount
。迈克，谢谢你的回复。如果不在承诺范围内，你会建议什么时候设立自治区？@BrianS，答案要长一点。一般来说，我建议使用
redux
，然后利用
redux承诺中间件
之类的工具来处理承诺内部可能出现的
挂起
、
履行
和
拒绝
状态。这还需要将组件连接到
redux
。我想说的是，如果你没有因为特定的原因而使用
redux
，那么你唯一的选择就是在分辨率范围内使用它。太棒了，非常感谢。我还没有涉足redux，因为我刚刚开始使用react。我将进一步研究该解决方案。嘿，执行此操作后，我的渲染函数无法知道this.state.chartData的状态。有什么原因吗？你能分享你的
render
功能吗？