Question

我对React非常陌生。我有一个通过WebAPI 2返回给我的JSON响应。

例如，如果我只想显示标题，我只想显示此回复的一部分

我实现了以下代码，但是当视图标题显示为未定义

App.js

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {reply: ""}
    this.callAPI = this.callAPI.bind(this);
  }

  componentDidMount(){
    this.callAPI();
  }

  callAPI(){
    fetch('http://localhost:51092/api/COM',{
      method:'get',
      headers:{'Content-Type':'application/json'}
    }).then(function(response){
      return response.json();
    }).then(responseData => {
      this.setState({reply:responseData});
      console.log("REPONSEDATA-----"+responseData);
      console.log(responseData.title);
    });
  }

  render(){
    return(
      <div>
      </div>
    );
  }
}

更新1

    callAPI(){
    fetch('http://localhost:51092/api/COM',{
      method:'get',
      headers:{'Content-Type':'application/json'}
    }).then(response =>{
      return response.json().then(responseData => {
        this.setState({reply:responseData});
        console.log("RESPONSE----"+JSON.stringify(responseData));
        console.log(responseData.title);
      });
    });
  }

API JSON响应

[{
    "fileVer": {
        "type": "specific",
        "fileId": {
            "type": "specific",
            "internalId": 1,
            "externalId": null
        },
        "internalVersion": 2,
        "externalVersion": null,
        "versionSortKey": "0"
    },
    "title": "1576544 Alberta Ltd._Annual Returns_2012-01-03",
    "extension": "pdf",
    "logicalSize": "47872",
    "sizePrecision": "exact",
    "createdAtUtc": "2019-05-27T15:22:41.510Z",
    "lastAccessedAtUtc": "2019-07-10T21:00:28.029Z",
    "lastWrittenAtUtc": "2019-05-27T15:17:48.000Z",
    "changedAtUtc": "2019-05-27T15:17:48.000Z",
    "fileGuid": "{881D8975-84B9-4A73-9AFF-F0C61C94FE90}",
    "checksumMD5": "24f6badff8b70783697e0052fc4a7fe6",
    "fileMissing": false,
    "contentIsVolatile": false
}][{
    "fileVer": {
        "type": "specific",
        "fileId": {
            "type": "specific",
            "internalId": 2,
            "externalId": null
        },
        "internalVersion": 3,
        "externalVersion": null,
        "versionSortKey": "0"
    },
    "title": "1576544 Alberta Ltd._By-Law #1_",
    "extension": "pdf",
    "logicalSize": "951046",
    "sizePrecision": "exact",
    "createdAtUtc": "2019-05-27T15:22:42.000Z",
    "lastAccessedAtUtc": "2019-07-10T21:02:54.062Z",
    "lastWrittenAtUtc": "2019-05-27T15:16:28.000Z",
    "changedAtUtc": "2019-05-27T15:16:28.000Z",
    "fileGuid": "{F8B54DB0-7E9F-4F0F-8ABA-D03C1DE4FF8C}",
    "checksumMD5": "ffe728ef1a87f0cec7737b6d224bb50d",
    "fileMissing": false,
    "contentIsVolatile": false
}]

不确定我在这里做错了什么，香港专业教育学院经常使用Ajax，所以我可能会混淆使用react和fetch可以完成的工作

更新2

所以看来这可能是单个对象，而不是对象数组。

        console.log("RESPONSE----"+JSON.stringify(responseData));
        var arr = [];
        console.log("KEYS"+Object.keys(responseData));
        Object.keys(responseData).forEach(function(key){
          console.log(responseData[key]);
          arr.push(responseData[key]);

当我尝试访问responseData [key]时，我最终得到一个字母，而不是json响应中的属性

这使我相信这不是对象数组而是单个对象

Answer 1

在打印完整的json响应时，如果对象的一部分是字符串（例如... response.title，那么它可以，但是如果没有，则可以尝试.toString（）或JSON.stringify），您应该使用JSON.stringify

        callAPI(){
            fetch('http://localhost:51092/api/COM',{
              method:'get',
              headers:{'Content-Type':'application/json'}
            }).then(function(response){
              return response.json().then((responseData)=>{
              this.setState({reply:responseData});
              console.log("REPONSEDATA----"+JSON.stringify(responseData));
              console.log(responseData.title);
              return responseData
              });

          }

React抓取JSON响应属性

1 个答案: