Question

我需要从api中获取所有结果作为表格。我想知道如何做嵌套数组'results [i]'。从图片中可以看到，由于'results [0]'，我仅获取一个结果。有人可以建议我拿走吗所有结果都放在表格中？

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchData } from '../actions/index';

class DataList extends Component {
componentWillMount() {
this.props.fetchData();
}

render() {
const dataItems = this.props.table.map(data => (
  <tr key={data.results[0].id}>
    <td>{data.results[0].id}</td>
    <td>
      <img
        style={{ width: '150px', height: '100px' }}
        src={data.results[0].image}
      />
    </td>
    <td>{data.results[0].name}</td>
    <td>{data.results[0].status}</td>
    <td>{data.results[0].species}</td>
  </tr>
));

return (
  <table className="table table-hover">
    <thead>
      <tr>
        <th>id</th>
        <th>Character image</th>
        <th>Name</th>
        <th>Status</th>
        <th>Species</th>
      </tr>
    </thead>
    <tbody>{dataItems}</tbody>
   </table>
 );
}
}

 const mapStateToProps = state => ({
  table: state.table
 });

  export default connect(mapStateToProps, { fetchData })(DataList);

Answer 1

您应该映射结果而不是表格

const dataItems = this.props.table.map(data => (
<tr key={data.results[0].id}>
<td>{data.results[0].id}</td>
<td>
  <img
    style={{ width: '150px', height: '100px' }}
    src={data.results[0].image}
  />
</td>
<td>{data.results[0].name}</td>
<td>{data.results[0].status}</td>
<td>{data.results[0].species}</td>
</tr>

））;

应该是

const dataItems = this.props.table.results.map(result => (
<tr key={result.id}>
<td>{result.id}</td>
<td>
  <img
    style={{ width: '150px', height: '100px' }}
    src={result.image}
  />
</td>
<td>{result.name}</td>
<td>{result.status}</td>
<td>{result.species}</td>
</tr>

））;

然后它将起作用，您也可以通过连接唯一的结果而不是像您所说的那样“表”传递结果

Answer 2

这是答案。问题出在嵌套循环上。

DatePicker

在React，Redux中从api获取嵌套循环数组获取

2 个答案: