web-dev-qa-db-ja.com

.map（）undefinedはReact.jsの関数ではありません

右、おそらくここで明らかなことを見逃していますが、「Uncaught TypeError：undefined is a function」ではありません。私は.map（）のようですが、それは問題ですが、その理由はわかりません。

var idealist = React.createClass({
loadCommentsFromServer: function() {
    $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
            this.setState({data: data});
        }.bind(this)
    });
},
handleButtonClick: function(input) {
    // do stuff //
},
getInitialState: function() {
    return {data: []};
},
componentWillMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
    var clickFunction = this.handleButtonClick;
    var ideas = this.state.data.map(function(i){
        return <ideabox data={i} onButtonClick={clickFunction} />;
    });
    return (
        <div className="idealist">
            {ideas}
        </div>
        );
}
});

React.renderComponent(
<idealist  url="/json/quotes.php"  pollInterval={2000}/>,
document.getElementById('quoteList')
);

Var ideas = this.state.dataに変更した場合、エラーは表示されません。JSONデータは正しくフォーマットされていますが、何が問題なのでしょうか？

javascriptreactjsreact-jsx
14
t1m0thy

それは愚かな間違いであり、quotes.phpは適切にフォーマットされたJSONデータを返さなかったため、配列.map（）が呼び出されていませんでした。学んだ教訓？自分のコードが機能するという理由で他の人にWordを受け取らないでください！

18
t1m0thy

.map()は、提供される結果を使用して新しい配列を作成するメソッドです。

そのためのドキュメントは次のとおりです。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

ここでできることは、オブジェクトの_.data_プロパティを変更して配列を返すことです。 .map()は配列型のオブジェクトでのみ機能するためです。

5
Afzaal Ahmad Zeeshan