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

Question

我正在尝试解析从index.html中的API获取的JSON响应，并将其作为 Prop 发送到组件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”参数。类型错误:无法读取未定义的属性“lon”。

编辑:如果我使用 props.props.coord.lon ，我会得到 Cannot read property 'lon' of undefined ，如果我在 div 中仅使用 props.props.coord ，它会显示:它不是一个有效的 react 子对象，找到了带有 lat 和 lon 键的对象。

Answer 1

哦，那是因为在 componentDidMount 方法之前调用了带有空数组的 render 方法，然后 ComponentDidMount 触发并发出获取数据的请求，然后获取数据并将其打印到控制台，我可以预期您会收到一个在 props 控制台之前未定义控制台，

看一下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>
            )
    }

}