Invariant Violation：对象作为 React 子对象无效（发现：对象与键 {_40, _65, _55, _72}）答案

【问题标题】：Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72})Invariant Violation：对象作为 React 子对象无效（发现：对象与键 {_40, _65, _55, _72}）
【发布时间】：2020-05-29 08:04:37
【问题描述】：

我有一个平面列表，在平面列表中，每个项目都有地理位置。

我从Flatlist 内部呼叫{this.getitemlocation(item.location)}。这里getitemlocation() 是函数，item.location 是经度和纬度。

我的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>
      );
    }
  }

我得到的错误：

Invariant Violation：对象作为 React 子对象无效（发现：具有键 {_40、_65、_55、_72} 的对象）。如果您打算渲染一组子项，请改用数组。

【问题讨论】：

看来你必须解决这个承诺，因为你的函数是异步的。
@yesIamFaded 我该怎么做？
嗯，reverseGeocodeAsync 做了什么，也可能显示代码，你知道当你做什么时错误到底在哪里显示。
@yesIamFaded reverseGeocodeAsync 将经度和纬度转换为城市和国家/地区，它是 expo 中的一个内置功能，当我删除异步并等待错误消失但随后它没有获取位置。
stackoverflow.com/questions/53325386/… - 看看这里你的问题会很相似，基本上你缺少一个 .then() 来获取值，最后缺少一个 .catch() 来处理错误如果发生。

标签： javascript react-native location expo

【解决方案1】：

你不能像那样返回异步函数。你可以像这样使用 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>
      );
    }
}

【讨论】：

获取数据后调用：let text_location = await this.getitemlocation(item)
感谢您的回答，但它对我不起作用，出现同样的错误。还有什么我可以尝试的吗？
没有没有。从 getitemlocation 获得返回时，您必须使用 await