在 React 中过滤 API 以仅呈现特定数据

Question

我使用 React 获取了一个 API，我想知道如何从 JSON 文件中过滤数据，因为目前我正在渲染所有内容，但我希望能够只渲染国家的 === 'Paris', 'Los Angeles', 'New York' 而不是所有城市的

class App extends Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    fetch(url)
      .then(results => results.json())
      .then(results => this.setState({ data: results }));
  }
  render() {
    let coins = this.state.data.map(city => (
      <React.Fragment>
        <tr key={city.symbol}>
          <td>{city.rank}</td>
          <td>
            <img src={city.image} alt={city.name} height="30" width="30" />
          </td>
          <td>{city.symbol}</td>
          <td>{city.name}</td>
          <td> ${Number(city.pers).toFixed(4)}</td>
          <td>$ {Number(city.pers).toFixed(4)}</td>
          <td>$ {Number(city.year).toFixed(4)}</td>
          <td>go to {city.name}</td>
        </tr>
      </React.Fragment>
    ));

Answer 1

const citiesToInclude = ['Paris', 'Los Angeles', 'New York'];

class App extends Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    fetch(url)
      .then(results => results.json())
      .then(results => this.setState({ data: results.filter(city => return { 
           citiesToInclude.some(cityName => cityName === city.name)        
      } }));
  }
  render() {
    let coins = this.state.data.map(city => (
      <React.Fragment>
        <tr key={city.symbol}>
          <td>{city.rank}</td>
          <td>
            <img src={city.image} alt={city.name} height="30" width="30" />
          </td>
          <td>{city.symbol}</td>
          <td>{city.name}</td>
          <td> ${Number(city.pers).toFixed(4)}</td>
          <td>$ {Number(city.pers).toFixed(4)}</td>
          <td>$ {Number(city.year).toFixed(4)}</td>
          <td>go to {city.name}</td>
        </tr>
      </React.Fragment>
    ));

在 React 中过滤 API 以仅呈现特定数据

Filter API in React to render only specific Data

state

filter

setstate

reactjs