React Ajax和jsx [英] React ajax and jsx

问题描述

我用ajax请求结果填充的数组不会出现在我的React组件无序列表中.

My array that I filled with my ajax request result will not appears in my react components unordered list.

当我执行数组的console.log时，我得到:

When I do a console.log of the array I get:

[] 0 : 职业"

[] 0 : "Career"

1 : 中等职业技术学院"

1 : "Middle College for Technology Careers"

2 : 新西兰职业"

2 : "Careers New Zealand"

3 : 职业退伍军人200"

3 : "Careers for Veterans 200"

4 : 北边健康职业高中"

4 : "Northside Health Careers High School"

5 : 芭比的职业"

5 : "Barbie's careers"

6 : 爱德华·肯尼迪健康职业学院"

6 : "Edward M. Kennedy Academy for Health Careers"

7 : 伦敦大学职业小组"

7 : "The Careers Group, University of London"

8 : 职业顾问"

8 : "Careers advisor"

9 : 职业咨询服务"

9 : "Careers advisory service"

长度 : 10

原始 : 数组[0]

当我在react组件内部调用此数组时，它不会呈现.这是我的下面的代码.

When I call this array inside my react component it does not render. Here is my code below.

HTML

<div id="content"></div>

JS

  //array that the titles will be loaded into
  var response = [];

  $.ajax({
    // request type ( GET or POST )
  type: "GET",

    // the URL to which the request is sent
  url: "https://en.wikipedia.org/w/api.php?",

    // data to be sent to the server
  data: { action:'query', format:'json', list: 'search', srsearch: 'careers', srwhat: 'text', srprop: 'timestamp', continue: ''},

    // The type of data that you're expecting back from the server
dataType: 'jsonp',
crossDomain : true,
// Function to be called if the request succeeds
success: function( jsondata ){

for(var i = 0; i < jsondata.query.search.length; i++){
    //console.log( jsondata.query.search[i].title );
  //pushes each result into the array named list
  response.push(jsondata.query.search[i].title);
}

}
});



 console.log(response)


var App = React.createClass({
render: function(){
//var title = list;
return(
  <div>
  <h1>Hello World</h1>
  <p>The world is full of oppurtunity</p>
    <ul>
      <li>{response[0]}</li>
      <li>Freedom</li>
      <li>Lozve</li>
      <li>Money</li>
    </ul>
    </div>
    );
  }
  });

   ReactDOM.render(<App/>, document.getElementById("content"));

这是我所有代码所在的笔的链接， http://codepen.io /vhall_io/pen/vKQrQN/.我在第一个li标签中插入了response [0]，但它不会渲染.请帮我渲染一下.

Here is a link to my code pen where all my code is, http://codepen.io/vhall_io/pen/vKQrQN/ . I inserted response[0] into the first li tag and it will not render. Please help me render this.

推荐答案

您必须更新状态.如果您将其添加到变量，它将不会渲染.因为它是ajax调用，所以您的html首先呈现

You have to update state. It wont render is you are adding it to variable. as it is ajax call so your html render first

这篇关于React Ajax和jsx的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！