如何显示数组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>
    );
  }
}