Question

我正在使用React创建天气应用，并且我有一个为我提供对象的api

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

获取数据后，我将数据存储为状态。最后，我想将this.state.weather.daily.data作为道具传递给子组件，但是我收到TypeError：无法读取未定义的属性'data'

Answer 1

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

您可能会收到错误消息，因为在异步请求完成之前，没有初始化this.state.weather.daily。快速黑客可能是这样的：

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

这将确保WeeklyWeather仅在初始化daily时呈现。

Answer 2

第一个渲染this.state.weather尚未初始化

关注此主题 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

您要在道具存在之前将其传递给孩子。

HTML绑定到DOM后，将调用

componentDidMount()，这意味着您的render()已经运行。但是，当然，您的render()指的是this.state.weather.daily.data完成后才存在的componentDidMount()。

您要做的就是在尝试使用数据之前检查数据是否已加载。

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

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

3 个答案: