我试图解析从 index.html 中的 API 获取的 JSON 响应，并将其作为 props 发送到组件 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;

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'));

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

编辑：如果我使用 props.props.coord.lon ，我会得到无法读取未定义的属性“lon”；如果我在 div 中仅使用 props.props.coord ，则表明它不是有效的 React 子项，找到了具有键 lat 和 lon 的对象。