在对象中反映映射嵌套数组

Question

目标是引入嵌套数组＆＃34;记录＆＃34;。我当前的输出显示反应控制台中的数组，但出现错误。我会尝试尽可能简洁，但会保持简短。

错误屏幕有3行引用_getRecords所以我很肯定_getRecords是问题孩子。

class RecordBox extends Component {
    constructor() {
    super();

  this.state = {
    showComments: false,
    results: []
  };
 }
 render(){
   const records = this._getRecords();
   return (
      // jsx template code...
   );
  }
  // API Call
 _fetchRecords() {
  $.ajax({
   method: 'GET',
   url: 'http://apidata:8888/data.json',
   success: (results) => {
     this.setState({ results });
   },
   error: () => {
     console.log('error');
   }
  });
 }
 _getRecords() {
    // TypeError: this.state.results.map is not a function...
    return this.state.results.map((record) => {
      return <Comment body={record["Contractor Name"]} />
    });
  }
}

我有一个如下所示的Feed。我无权修改此内容。

{
"result": {
  "records": [
    {
      "id": 1,
      "email": "clu.hey@gmail.com",
      "author": "Clu",
      "Contractor Name": "Just say no to love!!",
      "avatarUrl": "https://placeimg.com/200/240/any"
    },{
      "id": 2,
      "email": "hello@gmail.com",
      "author": "Anne Droid",
      "Contractor Name": "I wanna know what love is...",
      "avatarUrl": "https://placeimg.com/200/240/any"
    }
  ]
 }
}

Answer 1

我认为你不是把状态设置为正确的。您的 state.results 目前是一个对象。只需确保在设置状态时，将 state.results 设置为 results.result.records

type

您还可以做的一件事是直接在jsx代码中映射结果并跳过使用_getRecords函数。

this.setState({ results: results.result.records })

这是我通常写这个的方式，因为我更容易阅读，但这是个人偏好。

我希望这有帮助！

Answer 2

_fetchRecords函数需要更改为： -

_fetchRecords() {
  $.ajax({
   method: 'GET',
   url: 'http://apidata:8888/data.json',
   success: (results) => {
     this.setState({ results: results.result.records });
   },
   error: () => {
     console.log('error');
   }
  });
 }