Question

我正在进行API调用，我得到的响应如下：

{  
  "meta":
  {  
    "code":200,
    "msg":"xyz"
  },
  "data":[
           {"name": "Test1"},
           {"name": "Test2"},
         ]
}

我已经查看了其他答案，但我无法弄清楚如何在我的React应用程序中解析它。

我的表格如下：

   <tbody>
        { this.props.names && this.props.names.map(this.names)}
    </tbody>

功能如下：

names(data) {
const name = data.name;
const id = data.id;
  return (
    <tr key={name}>
      <td> {name} </td>
      <td> {id} </td>
    </tr>
 );
}

我将来自API调用的响应数据作为道具传递给表。问题是虽然响应包含如上所示的数据，但表格只是空白。

Answer 1

@Raul Rene指出的解决方案是正确的。传递下来的道具不正确。在我的mapStateToProps中，由于上述解析失败，返回错误。

Answer 2

如果我的问题是对的，我相信你应该这样做：

fetchData() {
  ...
  // fetch the JSON
  const result = {  
    "meta": {  
      "code":200,
      "msg":"xyz"
    },
    "data": [
      {"name": "Test1", "id": 1},
      {"name": "Test2", "id": 2},
    ]
  }
  this.setState({ data: result.data });
}

parseData(data) {
  return (
    <tbody>
      {data.map(({name, id}, idx) => {
        <tr key={`row_${idx}`}>
          <td>{id}</td>
          <td>{name}</td>
        </tr>
      })}
    </tbody>
  );
}

render() {
  return (
    <div>
      {this.parseData(this.state.data)}
    </div>
  );
}

如何解析Javascript数组中的对象并使用React进行渲染？

2 个答案: