在 Reactjs 构造函数中使用 Jquery 提取 JSON 数据时无法读取 Null 的属性答案

【问题标题】：Cannot Read Property of Null when using Jquery inside Reactjs constructor to Extract JSON data在 Reactjs 构造函数中使用 Jquery 提取 JSON 数据时无法读取 Null 的属性
【发布时间】：2017-11-01 15:40:18
【问题描述】：

我正在学习 ReactJS 来制作一个需要 Jquery 从服务器提取远程 JSON 数据的 Web 应用程序。当我手动将 JSON 数据放入 App.js 时，Web 应用程序可以工作，但是当我尝试提取远程 JSON 数据时，会给出错误无法读取 Null 的属性“轮询”。

这里是手动放入 JSON 数据的 app.js：

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;

当我尝试更改 this.state 以使用 Jquery 提取数据时...

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

...我收到错误消息无法读取 null 的属性“polls”。

我该如何解决这个错误？

【问题讨论】：

标签： javascript jquery json reactjs

【解决方案1】：

你的代码结构不正确，这样写：

首先在state中定义polls变量（初始值）：

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

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

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

注意：使用arrow function 绑定正确的上下文。

更新：

您编写的方式仅在您加载本地json时有效，您需要使用fetch或axios或jquery ajax调用进行get调用以从远程服务器获取该json。

【讨论】：

componentDidMount() 似乎从未运行过。我剩下一个对象：{polls : [null]}。我应该在某个地方调用它吗？
不，你不需要调用，在里面做console.log('called')，一旦组件第一次被渲染，它肯定会被调用。
我没有投反对票。我仍在努力让它发挥作用。
只需将 componentDidMount 方法中的 url 替换为您正在获取的 json 的 url 就可以了，我没有说您不赞成 :)
如果我想先测试本地JSON文件，URL可以是sample.json吗？

【解决方案2】：

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

如果您遵循 Mayank Shukla 的回答，您应该能够避免此问题，因为在构造函数中您确实将 this.state.polls 定义为一个空数组（不为 null 或未定义）

【讨论】：