反应本机呈现嵌套Json

加载JSON对象并将其添加到this.state后，我无法访问低于第一级的级别。给定此JSON文件：

{
  "ts": 1530703572,
  "trend": {
    "val": 0,
    "text": "gleichbleibend"
  },
  "baro": 1011.3453734999999,
  "temp": {
    "out": {
      "f": 85.9,
      "c": 29.9
    }
  },
  "hum": {
    "out": 28
  },
  "wind": {
    "speed": {
      "mph": 2,
      "kmh": 3.2
    },
    "avg": {
      "mph": 3,
      "kmh": 4.8
    },
    "dir": {
      "deg": 192,
      "text": "SSW"
    }
  },
  "rain": {
    "rate": 0,
    "storm": 0,
    "day": 0,
    "month": 0,
    "year": 451.358
  },
  "et": {
    "day": 88,
    "month": 81,
    "year": 1802
  },
  "forecast": {
    "val": 6,
    "rule": 45,
    "text": "Zunehmend wolkig bei gleichbleibender Temperatur."
  },
  "sun": {
    "uv": 6.2,
    "rad": 779,
    "rise": "4:27",
    "set": "20:35"
  }
}

结果如下：

{this.state.weatherList.ts}工程：1530703572

{this.state.weatherList.temp.out.c}“TypeError:Undefined不是对象（计算：'this.state.weatherList.temp.out'）

代码：

export default class Weather extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            weatherList: []
        }

        getPlannerData().then(data => {
            this.setState({
                weatherList: data
            })

        })
    }

        return (
            <ScrollView>
                <View>
                    <View>
                        <Text>{this.state.weatherList.temp.out.c}</Text>
                    </View>

                </View>
            </ScrollView>
        )
    }
}

async function getPlannerData() {
    let data = await fetchApi('url')
    return data
}

async function fetchApi(url) {
    try {
        let response = await fetch(url)
        let responseJson = await response.json()
        console.log(responseJson)
        return responseJson
    } catch (error) {
        console.error(error)
        return false
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)'
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44
    }
})

导出默认类Weather.Component{
建造师（道具）{
超级（道具）
此.state={
天气预报表：[]
}
getPlannerData（）。然后（数据=>{
这是我的国家({
天气表：数据
})
})
}
返回(
{this.state.weatherList.temp.out.c}
)
}
}
异步函数getPlannerData（）{
let data=wait fetchApi（'url'）
返回数据
}
异步函数fetchApi（url）{
试一试{
let response=等待获取（url）
让responseJson=wait response.json（）
console.log（responseJson）
返回响应
}捕获（错误）{
控制台错误（错误）
返回错误
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
加油站：22
},
章节标题：{
paddingTop:2，
paddingLeft:10，
paddingRight:10，
填充底部：2，
尺寸：14，
fontWeight:'粗体'，
背景颜色：“rgba（247,1.0）”
},
项目：{
填充：10，
尺码：18，
身高：44
}
})

问题是如何修改代码，以便访问“temp”之类的嵌套元素

我用renderItem和{this.state.weaterlist.map（（item，I）=>进行了尝试，但没有成功

---

提前感谢！

在设置

weatherList

对象之前，任何超出对象一级的操作都将导致错误。

this.state.weatherList.ts

不会给出错误，因为在您的请求完成之前，它将是

未定义的

例如，您可以保留一个状态变量
加载
，并仅在请求完成时进行渲染，以解决此问题

示例

class Weather extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: true,
      weatherList: {}
    };

    getPlannerData().then(data => {
      this.setState({
        loading: false,
        weatherList: data
      });
    });
  }

  render() {
    const { loading, weatherList } = this.state;

    if (loading) {
      return null;
    }

    return (
      <ScrollView>
        <View>
          <View>
            <Text>{weatherList.temp.out.c}</Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}

class.com组件{
建造师（道具）{
超级（道具）；
此.state={
加载：对，
天气预报表：{}
};
getPlannerData（）。然后（数据=>{
这是我的国家({
加载：false，
天气表：数据
});
});
}
render（）{
const{loading，weatherList}=this.state；
如果（装载）{
返回null；
}
返回(
{weatherList.temp.out.c}
);
}
}
我不得不将加载：true改为false，现在它可以工作了！非常感谢！