将对象作为道具传递给子组件

Question

I am creating weather app with React and I have an api which provides me object

import React, { Component } from 'react';
import WeeklyWeather from './components/WeeklyWeather';
const api = '';
class App extends Component {
  constructor() {
    super();
    this.state = {
      weather: {}
    }
  }

  componentDidMount() {
    fetch(api)
    .then(response => response.json())
    .then(data => this.setState({ weather: data }));
  }

  render() {
    return (
      <div className="App">
        <WeeklyWeather day={this.state.weather.daily.data} />
      </div>
    );
  }
}

After fetching it, I store data as state. Finally, I want to pass this.state.weather.daily.data as props to child component, but I received TypeError: Cannot read property 'data' of undefined

Answer 1

    <WeeklyWeather day={this.state.weather.daily.data} />

It can be you get the error because before the async request has finished, there is no this.state.weather.daily initialized. Quick hack could be something like this:

  {   this.state.weather.daily && <WeeklyWeather day={this.state.weather.daily.data} />}

This will make sure WeeklyWeather is only rendered when daily is initialized.

Answer 2

the first render this.state.weather isn't initialized yet

follow this thread React state data null for the first time

   class App extends Component {
      constructor () {
        super()
        this.state = {
          weather: {}
        }
      }

      componentDidMount () {
        fetch(proxy)
          .then(response => response.json())
          .then(data => this.setState({ weather: data }))
      }

      render () {
        return (
          <div className='App'>
            {this.state.weather && (
              <WeeklyWeather day={this.state.weather.daily.data} />
            )}
          </div>
        )
      }
    }

Answer 3

You're passing the prop to the child before it exists.

componentDidMount() is called once the HTML is bound to the DOM, which means your render() has already run. But, of course, your render() refers to this.state.weather.daily.data which doesn't exist until after componentDidMount() completes.

All you have to do is check that the data is loaded before you attempt to use it.

<WeeklyWeather day={this.state.weather.daily && this.state.weather.daily.data} />