下面是答案。嵌套循环出现问题。
我需要从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);
您应该映射结果，而不是表
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>
))；
然后它就可以工作了，你也可以只传递连接结果，而不是像你称之为的"表">
render() {
const dataItems = this.props.results.map(result =>
(result.results.map(item =>
(
<tr key={item.id}>
<td>{item.id}</td>
<td>
<img
style={{ width: '150px', height: '100px' }}
src={item.image}
/>
</td>
<td>{item.name}</td>
<td>{item.status}</td>
<td>{item.species}</td>
</tr>
)