web-dev-qa-db-ja.com

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

私はReactに慣れていないので、何が間違っているのかを理解しようと少し頭がおかしくなります。ajax呼び出しから取得したjson配列を反復処理しようとしています。データをモックして完全に機能しますが、まったく同じデータを取得するためにajax呼び出しを行うと、undefined is not a function (evaluating 'this.state.list.map()')が得られます。

配列：

[ { "name": "drop1" }, { "name": "drop2" }, { "name": "drop3" } ]

関数：

var List = React.createClass({
  getInitialState: function() {
   return {data: {}};
 },
 componentDidMount: function() {
   $.ajax({
       url: ACTUAL_URL,
       dataType: 'json',
       success: function(data){
         this.setState({data: data});
       }.bind(this),
       error: function(xhr, status, err){
         console.error(url, status, err.toString());
       }.bind(this)
     });
  },
  render: function() {
    return (
      <ul className="droplist">
        {this.state.data.map(function(l){
           return (<li>{l.name}</li>)
        })}
      </ul>
    );
  }
});

どんな助けでも大歓迎です。

javascriptajaxreactjsreact-jsx
7
this_is_ender

getInitialState()を変更します。現在、データはオブジェクトリテラルであり、オブジェクトリテラルはmap()をサポートしていません。配列に変更します。

15
Henrik Andersson

私の場合、 array.map を使用しようとしましたが、データは実際には配列ではなくオブジェクトであったため、Object.keys(data)を使用するのがオブジェクトを反復処理する正しい方法です。

Object.keys(data).forEach(item => {...});
// OR
Object.keys(data).map(item => {...});

詳細はこちら

2
adi