反应 ajax 和 jsx

Question

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

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

[] 0 : "职业生涯"

1：“技术职业中学”

2：“新西兰职业”

3：“退伍军人职业200”

4：“北边健康职业高中”

5：《芭比的职业生涯》

6：“爱德华·肯尼迪卫生职业学院”

7：“伦敦大学职业小组”

8：“职业顾问”

9：“职业咨询服务”

长度：10

原型：数组[0]

当我在我的 React 组件中调用这个数组时，它不会呈现。 下面是我的代码。

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/ 。 我将 response[0] 插入到第一个 li 标签中，它不会呈现。 请帮我渲染这个。

Answer 1

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