javascript - 使用 React 和 Bootstrap 映射数组
问题描述
我正在尝试使用引导程序将 JSON 从 API 调用映射到返回。我希望名称一一映射到所有列和行,直到显示所有数据。目前,它正在映射所有 3 列中的所有数据(名称)。
componentDidMount() {
fetch(API + 'ts=' + date + 'apikey=' + pubKey + 'hash=' + hash)
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
char: result.data.results,
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const { error, isLoaded, char } = this.state;
return (
char.map(char =>
<Container>
<Row>
<Col md="4"> <h2>{char.name}</h2></Col>
<Col md="4"> <h2>{char.name}</h2></Col>
<Col md="4"> <h2>{char.name}</h2></Col>
</Row>
</Container>
)
)
}
}
解决方案
如果我理解正确,如果您尝试映射所有数据并希望在网格内显示它。您应该执行以下操作。
render() {
const { error, isLoaded, char } = this.state;
return (
<Container>
<Row>
{ char.map(char => (<Col md="4"> <h2>{char.name}</h2></Col> ) }
</Row>
</Container>
)
}