API фильтра в React для отображения только определенных данных - PullRequest
Новая
       17

API фильтра в React для отображения только определенных данных

0 голосов
/ 24 марта 2019

Я получил API с использованием реагировать, и я хотел бы знать, как я могу отфильтровать данные из файла JSON, потому что в данный момент я отрисовываю все, но я хотел бы иметь возможность отображать только страну === 'Париж',' Лос-Анджелес ',' Нью-Йорк 'и не все города 

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>
    ));

1 Ответ

1 голос
/ 24 марта 2019 
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>
    ));
...