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

-1

我正在学习ReactJS以制作一个需要Jquery从服务器提取远程JSON数据的Web应用程序。当我尝试手动将JSON数据放入App.js时，该Web应用程序正常工作，但在尝试提取远程JSON数据时发生错误无法读取属性“polls”Null。在Reactjs构造函数中使用Jquery提取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;

当我尝试改变this.state使用jQuery获得提取的数据...

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

...我收到一个错误无法读取属性'民意调查'的空。

如何解决此错误？

来源

2017-05-31 Ethernetz

您构建代码的方式是不正确的，写这样的：

首先定义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'); 
     } 
    }); 
}

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

更新：

你写的，只有当你加载本地JSON的工作方式，你需要使用fetch或axios或jQuery的Ajax调用进行GET调用从远程服务器JSON。

来源

2017-05-31 17:47:41

它不会出现componentDidMount（）曾运行。我剩下一个对象：{polls：[null]}。我应该把它称为什么地方？ – Ethernetz

不，你不需要调用，在内部执行'console.log（'called'）'，一旦组件第一次呈现就会被调用。 –

请提供downvote的原因。 –

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

如果按照Mayank舒克拉的答案，你应该能够避免这个问题，因为在构造你做定义this.state.polls为空数组（不是null或undefined）

来源

2017-05-31 18:09:34

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

回答

相关问题