反應 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首先呈現