ReactJS дает сбой при отображении массива, вызываемого из API и возвращающего неопределенный - PullRequest
Новая
       27

ReactJS дает сбой при отображении массива, вызываемого из API и возвращающего неопределенный

0 голосов
/ 01 мая 2019

Я изучаю ReactJS и создаю небольшое приложение, которое извлекает данные из API и отображает их на странице. У меня есть боковая панель, которая содержит список регионов и выполняет API-вызов, чтобы получить все страны региона по щелчку. 

    function getOccurrence(array, value) {
      return array.filter((v) => (v === value)).length;
    }

    let uniqueRegions = totalRegions.filter((v, i, a) => a.indexOf(v) === i);

    let lis = [];
    for (let i = 0; i < uniqueRegions.length -1; i++) {
      lis.push(
        <li className="nav-item" key={i} onClick={props.sideBar}>
          <span className="nav-link bg-success mb-1"><strong>{uniqueRegions[i]}</strong> - {getOccurrence(totalRegions, uniqueRegions[i])}</span>
          <ul>
          {this.props.regionData.map((country, index) => <li key={index}>{country.name}</li>) || null}
          </ul>
        </li>

      )

    }

Однако, первоначальный щелчок вызывает функцию и возвращает неопределенный массив. При отображении кратко неопределенного массива происходит сбой приложения. Я хотел бы отобразить массив и вернуть li для каждого элемента в массиве.

Я попытался условно отобразить нужный элемент {country.name} и вернуть ноль, если массив не определен, но когда массив определен, требуемый элемент не отображается. Ниже приведена функция, которая запускается при нажатии, и функция обратного вызова, которая устанавливает состояние для региональных данных. 

  sideBarData = () => {
    let totalRegions = this.state.nations.map(a => a.region)
    function getOccurrence(array, value) {
      return array.filter((v) => (v === value)).length;
    }
    let uniqueRegions = totalRegions.filter((v, i, a) => a.indexOf(v) === i);
    for (let i = 0; i < uniqueRegions.length -1; i++) {
      this.setState({
        regionData: this.findAllByRegion(uniqueRegions[i])
      })
    }
  }

  findAllByRegion = (region) =>{
    return Axios
     .get('https://restcountries.eu/rest/v2/region/' + region)
     .then(res => {
       if(res.status === 200 && res !== null){
        this.setState(prevState =>({
          regionData: res.data
        }))
         console.log(this.state.regionData);
       } else {
         throw new Error('No country found');
       }
       })
       .catch(error => {
         console.log(error)
         return []
       });
   };

Я ожидаю, что строка {this.props.regionData.map((country, index) => <li key={index}>{country.name}</li>) || null} будет нулевой, когда массив не определен, но DOM не обновляет li при определении массива.

Ответы [ 2 ]

0 голосов
/ 01 мая 2019

Просто проверьте, если вы получаете действительные данные из API, где вы устанавливаете свое состояние, выполните следующие действия, в вашем findAllByRegion

this.setState(prevState =>({
  // always validate your response.
  // if res is undefined doing res.data will crash your app
   regionData: res && res.data || []  
}))
0 голосов
/ 01 мая 2019

вы не можете использовать undefined.map. Вы должны убедиться, что значение является массивом, прежде чем отобразить его.

Например: 

   function getOccurrence(array, value) {
      return array.filter((v) => (v === value)).length;
    }

    let uniqueRegions = totalRegions.filter((v, i, a) => a.indexOf(v) === i);

    let lis = [];

    // this next line here makes sure you always have an array
    const regionData = this.props.regionData || [];

    for (let i = 0; i < uniqueRegions.length -1; i++) {
      lis.push(
        <li className="nav-item" key={i} onClick={props.sideBar}>
          <span className="nav-link bg-success mb-1"><strong>{uniqueRegions[i]}</strong> - {getOccurrence(totalRegions, uniqueRegions[i])}</span>
          <ul>
          {/* never undefined */regionData.map((country, index) => <li key={index}>{country.name}</li>) || null}
          </ul>
        </li>
      )
    }
...