如何显示来自数组 reactjs 的数据?

Question

我需要从多维数组中获取一个城市的所有值，而不是所有城市的所有值:) 我真的不明白如何以正确的方式写它。 请帮帮我:(
我只知道它应该是这样的：

weatherData.filter((wData) => wData.name === this.props.name)  

但我仍然不知道如何使它工作。

import React, { Component } from "react";
import "bootswatch/journal/bootstrap.css";
import "./App.css";
import { NavItem, Nav, Grid, Row, Col } from "react-bootstrap";
var reportsData = [
{
"id": "a101",
"name": "Report #a101",
"values": [
{
"count": 121,
"name": "a1",
}, {
"count": 312,
"name": "a2",
},
{
"count": 639,
"name": "a3"
}, {
"count": 19,
"name": "a4"
}
]
},
{
"id": "b101",
"name": "Report #b101",
"values": [{
"count": 163,
"name": "b1"
}, {
"count": 938,
"name": "b2"
}, {
"count": 233,
"name": "b3"
}, {
"count": 475,
"name": "b4"
}
]
}];
class WeatherDisplay extends Component {
constructor() {
super();
this.state = {
activePlace: 0,
};
}
render() {
const activePlace = this.state.activePlace;
return (
<div>
<h1>Displaying Data for {this.props.id}</h1>
<div>
{reportsData.map(function(ub) {
return (
<div>
<p>{ub.id}</p>
<p>{ub.name}</p>
{/* <p>{ub.values}</p> */}
</div>
)
})}       
</div>
</div>
);
}
}
class App extends Component {
constructor() {
super();
this.state = {
activePlace: 0,
};
}
render() {
const activePlace = this.state.activePlace;
return (
<div>
<Grid>
<Row>
<Col md={4} sm={4}>
<h3>Menu</h3>
<Nav
bsStyle="pills"
stacked
activeKey={activePlace}
onSelect={index => {
this.setState({ activePlace: index });
}}
>
{reportsData.map((place, index) => (
<NavItem key={index} eventKey={index}>
<br/>{place.id}
</NavItem>
))}

</Nav>
</Col>
<Col md={8} sm={8}>
<WeatherDisplay key={activePlace} id={reportsData[activePlace].id}  />
</Col>
</Row>
</Grid>
</div>
);
}
}
export default App;

Answer 1

像这样更改组件。

class WeatherDisplay extends Component {

constructor(props) {
super(props);
this.state = {
activePlace: 0
};
}
render() {
const { activePlace } = this.state;
const { id } = this.props;

return (
<div>
<h1>Displaying Data for {id}</h1>
<div>
{reportsData.filter((i) => i === id).map((ub) => (
<div>
<p>{ub.id}</p>
<p>{ub.name}</p>
{ub.values.map((i) => (
<p>
{i.name}: {i.count}
</p>
))}
</div>
))}
</div>
</div>
);
}
}