Инвариантное нарушение: объекты недействительны в качестве дочерних React (обнаружено: объект с ключами {_40, _65, _55, _72})

Question

У меня есть один плоский список, и в плоском списке каждый элемент имеет геолокацию.

Я звоню {this.getitemlocation(item.location)} изнутри Flatlist. Здесь getitemlocation() - функция, а item.location - долгота и широта.

My getitemlocation():

 async getitemlocation(item) {
   let locationstring = item.split(",");
    if(locationstring[0]!="None"&&locationstring[1]!="None"){
    let location = {
      latitude: Number(locationstring[0]),
      longitude: Number(locationstring[1]),
    };
    itemloacation = await Location.reverseGeocodeAsync(location);
    return (
      <Text style={styles.itemLocation} key={item}>
        {itemloacation.name} {"\u2022"} 2.3 km
      </Text>
    );
    }
    else{
      return (
        <Text style={styles.itemLocation}>
          No Location
        </Text>
      );
    }
  }

Я получаю ошибку:

Инвариант Нарушение: объекты недопустимы в качестве дочерних React (найдено: объект с ключами {_40, _65, _55, _72}). Если вы хотели визуализировать коллекцию потомков, используйте вместо этого массив.

Answer 1

Вы не можете вернуться к такой функции asyn c. Вы можете использовать Promise так:

getitemlocation(item){
  return new Promise(async (resolve) => {
    let locationstring = item.split(",");
    if(locationstring[0]!="None"&&locationstring[1]!="None"){
      let location = {
        latitude: Number(locationstring[0]),
        longitude: Number(locationstring[1]),
      };
      itemloacation = await Location.reverseGeocodeAsync(location);
      resolve(
        <Text style={styles.itemLocation} key={item}>
          {itemloacation.name} {"\u2022"} 2.3 km
        </Text>
      )
    }else{
      resolve (
        <Text style={styles.itemLocation}>
          No Location
        </Text>
      );
    }
}