Question

我想使用react Js调用API，其中JSON数据不在数组中

运行此代码时出现错误：this.props.result.map不是函数。

正在调用的API不是一个只是JSON对象的数组

  here is  my code:

   var App = React.createClass({
  //setting up initial state
  getInitialState:function(){
    return{
        data:[]
    };
  },

  getDataFromServer:function(URL){
    $.ajax({
        type:"GET",
        dataType:"json",
        url:URL,
        headers:{
      'Content-Type':'application/json',
                },
        success: function(response) {
            this.showResult(response);
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
        }.bind(this)
    });
   },

 showResult: function(response) {

        this.setState({
            data: JSON.parse(response)
        });
},

  var Result = React.createClass({
render:function(){
    var result = this.props.result.map(function(result,index){
        return <ResultItem key={index} user={ result } />
        });
    return(<div className="row">
           <div className="col-md-12">
               <table className="table table-bordered">
                   <thead>
                       <tr>
                           <th className="col-md-4">Id</th>
                           <th >Name</th>
                           <th>Independent</th>
                           <th>Description</th>
                           <th>uuid</th>
                      </tr>
                   </thead>
                   <tbody>
                       {result}
                   </tbody>
               </table>
           </div>
       </div>)
          }
  });
  var ResultItem = React.createClass({
render:function(){
    var camper = this.props.user;
    return(
                        <tr >
                            <td>{camper.id}</td>
                            <td>{camper.name}</td>
                            <td>{camper.independent}</td>
                            <td>{camper.description}</td>
                            <td>{camper.uuid}</td>
                        </tr>

                );
          }
       });

Answer 1

我将假设您从API获得的JSON结构。让我们说它是一个看起来像这样的对象：

{
  1234: {
    uuid: 1234,
    id: 'abcd',
    etc: 'etc'
  },
  5678: {
    uuid: 5678,
    etc: 'etc'
  }
}

要使用Array.prototype.map，您需要将其转换为数组。有一些很好的方法可以做到in this answer，例如：

var mappableResult = Object.keys(data).map(function (key) {return data[key]});

如果这不起作用，请发布您的响应数据的示例。

我想使用react Js调用API，其中JSON数据不是数组格式

1 个答案: