将 JSON 作为道具传递 - 无法读取未定义的属性“名称”答案

【问题标题】：Passing JSON as props - Cannot read property 'name' of undefined将 JSON 作为道具传递 - 无法读取未定义的属性“名称”
【发布时间】：2019-04-01 09:39:20
【问题描述】：

我正在发出一个 JSON 请求，它返回一个 JSON 对象。我想将数据移交给组件函数以进行显示，但是当我这样做时，它给了我错误：

无法读取未定义的属性“名称”

我已经在下面总结了，包括函数的完整代码也附上。

JSON：

http://api.openweathermap.org/data/2...c3ca2d4736dcfe

我将以上所有内容存储在状态中，然后将其作为道具传递：

<WeatherCard data={this.state.weatherdata} />

然后我可以在函数中记录道具，我得到：

Code:
 {cod: "200", message: 0.0081, cnt: 5, list: Array(5), city: {…}}
  city: {id: 2643743, name: "London", coord: {…}, country: "GB", population: 1000000}
  cnt: 5
  cod: "200"
  list: (5) [{…}, {…}, {…}, {…}, {…}]
  message: 0.0081
  __proto__: Object

我也可以记录 props.data.city：

Code:
  {id: 2643743, name: "London", coord: {…}, country: "GB", population: 1000000}
  coord: {lat: 51.5085, lon: -0.1258}
  country: "GB"
  id: 2643743
  name: "London"
  population: 1000000
  __proto__: Object

所以你会认为我可以通过 props.data.city.name 来获取城市名称，但不是。我得到无法读取未定义的属性“名称”。

完整代码：


import React, { Component } from 'react';
import './App.css';
import WeatherCard from './components/WeatherCard'

const config = {
  API: "http://api.openweathermap.org/data/2.5/forecast?q=London,uk&units=metric&cnt=5&APPID=",
  API_KEY: process.env.REACT_APP_OPEN_WEATHER_MAP_API_KEY
}

class App extends Component {

  constructor() {
    super()
    this.state = {
      error: null,
      weatherdata: "",
      isLoaded: false
    }
  }

  componentDidMount() {
    fetch(config.API + config.API_KEY)
      .then( result => result.json() )
      .then ( 
        (result) => {
          this.setState({ 
            weatherdata: result,
            isLoaded: true
          })
      },
      (error) => {
        this.setState({
          isLoaded: false,
          error: error
        })
      }
    )
  }

  render() {
    return (
      <div className="App">
        <WeatherCard data={this.state.weatherdata} />
      </div>
    );
  }
}

export default App;


------

import React from 'react';

function WeatherCard(props) {
  console.log(props.data.city.name) <---- this fails
  return (
    <div>

    </div>
  )
}

export default WeatherCard

【问题讨论】：

标签： javascript json reactjs

【解决方案1】：

在您尝试访问 API 之前，该 API 可能尚未返回结果。试试console.log(props);，你会发现props第一次是空的。

只有当isLoaded 设置为true 时，您才应该渲染WeatherCard 组件。

类似：

    {this.state.isLoaded && (<WeatherCard data={this.state.weatherdata} />)}

【讨论】：

【解决方案2】：

您对 API 的调用是异步的，您正在尝试在从 API 接收结果之前呈现您的 WeatherCard 组件。

仅当您有数据时才使用您的 isLoaded 状态变量来呈现组件。

render() {
  return (
    <div className="App">
      {this.state.isLoaded && (<WeatherCard data={this.state.weatherdata} />)}
    </div>
  );
}

【讨论】：

干杯！工作了一个享受:)

【解决方案3】：

你的组件在 fetch 之前渲染给出了它的结果，所以就这样做。设置为初始状态

weatherdata: {},

根据您的情况，天气数据应该是对象。

然后，在获取响应集中，不是整个响应，而是您需要的数据

 this.setState({ 
            weatherdata: result.city,
            isLoaded: true
          })

【讨论】：

【解决方案4】：

尝试将 props 设置为 componentWillMount ans 中的状态，然后在组件中使用它

【讨论】：

【解决方案5】：

你需要检查你的数据是否已经加载。然后渲染你的无状态组件。

// Example stateless functional component
const SFC = props => (
  <div>{props.label}</div>
);

// Example class component
class Thingy extends React.Component {
  constructor() {
    super()
    this.state = {
      error: null,
      weatherdata: "",
      isLoaded: true
    }
  }

  componentDidMount() {
    fetch('https://samples.openweathermap.org/data/2.5/weather?q=London,uk&appid=b6907d289e10d714a6e88b30761fae22')
      .then( result => result.json() )
      .then ( 
        (result) => {
          this.setState({ 
            weatherdata: result,
            isLoaded: false
          })
      },
      (error) => {
        this.setState({
          isLoaded: false,
          error: error
        })
      }
    )
  }

  render() {
    return (
      <div className="App">
       {this.state.isLoaded? <h1>Loading...</h1> :  <WeatherCard data={this.state.weatherdata} />}
        </div>
    );
  }
}


function WeatherCard(props) {
  console.log(props)
  return (
    <div>
    This is weather Data
    </div>
  )
}

// Render it
ReactDOM.render(
  <Thingy title="I'm the thingy" />,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

【讨论】：