javascript - React 映射对象内的嵌套数组

Question

目标是拉入嵌套数组“记录”。我当前的输出显示 react 控制台中的数组，但有错误。我会尝试尽可能简洁，但会保持简短。

错误屏幕有 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"]} />
    });
  }
}

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

{
"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

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

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

<div>
   {
     this.state.results.map( ( record ) => {
       return <Comment />
     }
   }
</div>

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

希望这会有所帮助!