当使用jQuery内部reactjs构造函数提取JSON数据时，无法读取null的属性

Question

我正在学习reactjs，以制作一个需要jQuery从服务器提取远程JSON数据的Web应用程序。当我手动工作将JSON数据放入app.js中时，Web应用程序起作用，但是当我尝试提取远程JSON数据时，错误的错误无法读取null的属性"民意调查"。

这是app.js，其中json数据手动输入：

import React, { Component } from 'react';
import Polls from './Components/Polls';
import './App.css';
import $ from 'jquery';
class App extends Component {
  constructor(){
    super();
      this.state = {
          polls:  [
          {
              survey_id: 1,
              choice1_votes: 4,
              choice1_text: "Kanye",
              choice1_image:"https://a.web.site/kanye.jpg",
              choice2_votes: 5,
              choice2_text:"Eminem",
              choice2_image:"https://a.web.site/eminem.jpg"
          },
          {
              survey_id: 2,
              choice1_votes: 7,
              choice1_text: "Football",
              choice1_image:"https://a.web.site/football.jpg",
              choice2_votes: 2,
              choice2_text: "Soccer",
              choice2_image:"https://a.web.site/soccer.jpg"
          }
      ]
};
      console.log(this.state);
  }
  render() {
    return (
      <div className="App">
        My App
        <Polls polls={this.state.polls}/>
      </div>
    );
  }
}
export default App;

当我尝试更改此内容时，要使用jQuery提取数据...

constructor(){
    super();
    $.getJSON('sample.json', function (data) {
      this.state = {data};
    });
  }

...我遇到的错误无法读取null的属性"民意调查"。

如何解决此错误？

Answer 1

构造代码不正确的方式，以下写入：

首先定义state中的民意调查变量(初始值(：

constructor(){
    super();
    this.state = {
        polls: []
    }
}

将JSON加载到ComponentDidmount生命周期方法中，并使用setState更新state值：

componentDidMount(){
    $.ajax({
       url: url,
       dataType: 'json',
       success: (data) => {
          this.setState({data: polls});
       },
       error: (xhr, status, err) => {
          console.error('error');
       }
   });
}

注意：使用箭头函数绑定正确的上下文。

更新：

您编写的方式仅在加载本地JSON时才能使用，您需要使用fetch或axios或jquery ajax调用来拨打呼叫以从远程服务器获取该JSON。

Answer 2

您的问题似乎是一个异步问题。我相信$.getJSON()是一个异步函数，因此，它不会停止执行。当您到达所谓的构造函数中的行时，程序开始执行$.getJSON()，但是由于该函数的空闲时间，因此constructor()的执行继续。这意味着constructor()大概在$.getJSON()之前完成了执行，因此render()功能试图在设置该值之前开始执行并尝试引用this.state.polls。

如果您遵循Mayank Shukla的回答，则应该能够避免此问题，因为在构造函数中，您 do 将 this.state.polls定义为空数组(这不是null或null null或Undefined(

<(/div>