Javascript 通过组件解析React.js中的JSON对象

我试图解析index.html中从API获取的JSON响应，并将其作为道具发送到组件Card.js，然后尝试呈现它，但结果表明，我只能在一定程度上访问它。我可以获取响应的控制台日志，但无法呈现它。我是reactjs的初学者。任何帮助都将不胜感激

card.js

import { render } from 'react-dom';

import '../css/styles.css'

const Card = function(props){
    console.log("props", props.props.coord)

    return(
    <div>
        <h1>Weather Information</h1>
        <div>{props.props.coord.lon}</div>

        {/* <ul>
            <li>Longitude:{t['lon']}</li>
        </ul> */}
    </div>
        // <div class = "card-complete">{cardval}</div>
    )
}

export default Card;

从'react dom'导入{render}；
导入“../css/styles.css”
常数卡=功能（道具）{
console.log（“props”，props.props.coord）
返回(
天气信息
{props.props.coord.lon}
{/*

经度：{t['lon']}
*/}
//{cardval}
)
}
导出默认卡；

index.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom';

import JSON from './weatherdata.json'
import Card from './components/card'
import App from './components/App'



class WeatherApp extends Component{

    state = {
        apidata : []
    }

    componentDidMount(){
        fetch("https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139")
        .then(data => data.json())
        .then(data => this.setState({apidata: data}))
        .catch(console.log)
      }

    render(){
        return(
            <div>
                <App/>
                <Card props={this.state.apidata}/>
            </div>
            )
    }

}

ReactDOM.render(<WeatherApp />, document.getElementById('root'));

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“./weatherdata.JSON”导入JSON
从“./组件/卡”导入卡
从“./components/App”导入应用程序
类WeatherApp扩展组件{
状态={
apidata:[]
}
componentDidMount（）{
取回（“https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139")
.then（data=>data.json（））
.then（data=>this.setState（{apidata:data}））
.catch（console.log）
}
render（）{
返回(

我无法访问'lon'和'lat'参数。TypeError:无法读取未定义的属性'lon'

编辑：
如果我使用
props.props.coord.lon
，我将无法读取未定义的属性'lon'，如果我在div中仅使用
props.props.coord
，则表明它不是有效的react子对象，并且找到了键lat和lon。
更改此设置

state = {
    apidata : []
}

对此

state = {
    apidata : { coord: { lat: 0, lon: 0 } } // this is initial value, used until data fetched
}

哦，这是因为在componentDidMount方法之前调用了render方法，该方法使用空数组，然后componentDidMount激发并请求获取数据，然后获取数据并将其打印到控制台，我可以预期，在道具控制台之前，您会收到一个未定义的控制台

请看一下react的生命周期

**渲染前需要检查是否存在数据


class WeatherApp extends Component{

    state = {
        apidata : []
    }

    componentDidMount(){
        fetch("https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139")
        .then(data => data.json())
        .then(data => this.setState({apidata: data}))
        .catch(console.log)
      }

    render(){
        return(
            <div>
                <App/>
                // here to check if there is data in the state by checking there length
                this.state.apidata.length && <Card props={this.state.apidata}/>
            </div>
            )
    }

}


类WeatherApp扩展组件{
状态={
apidata:[]
}
componentDidMount（）{
取回（“https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139")
.then（data=>data.json（））
.then（data=>this.setState（{apidata:data}））
.catch（console.log）
}
render（）{
返回(
//这里通过检查数据长度来检查状态中是否有数据
this.state.apidata.length&&
)
}
}
我明白你的意思，但this.state.apidata.length&&对我不起作用。是的，我在道具前有一个空控制台。我现在正在使用
{this.state.apidata.length}&&
，但结果相同。@fadi\u omar