React 组件中未定义的某些对象属性答案

【问题标题】：Certain object properties undefined in React componentReact 组件中未定义的某些对象属性
【发布时间】：2018-06-02 13:50:51
【问题描述】：

我有一个从https://openweathermap.org/ 获取天气数据的容器组件。然后容器组件将该状态数据提供给一个展示组件。

虽然存在一些状态属性，但在表示组件中，其他一些是未定义的。如果我将它们包装在超时中，它们会出现。

我一直在寻找为什么会这样，但我一直找不到任何原因说明它们在容器组件中被获取并传递到演示组件后会未定义。

代码笔：https://codepen.io/ZCKVNS/pen/wpGaMe?editors=0010

关于展示组件和容器组件的文章：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

const App = data => {

  setTimeout( () => {
    console.log('clouds', data.data.clouds.all); //defined
    console.log('lat',data.data.coord.lat); //defined
    console.log('lon', data.data.coord.lon); //defined
  }, 100);

  return (
    <div>
        { data.data.clouds.all } <!-- Not defined -->
    </div>
  );
}

class AppContainer extends React.Component {
  constructor() {
    super();
    this.state = { data: {} };
  }

  componentDidMount() {
    fetch( 'https://api.openweathermap.org/data/2.5/weather?zip=43055,us&appid=4e08bb16c8936bd92b4780f9e2cdf00f' )
        .then( res => res.json() )
        .then( data => this.setState( { data } ) );
  }

  render() {
    return React.createElement( App, { data: this.state.data } );
  }
}

ReactDOM.render(
  <AppContainer />,
  document.getElementById( 'container' )
);

【问题讨论】：

那是因为你第一次渲染组件的时候还没有完成抓取。
好的，所以我想我可以延迟渲染直到获取完成？感谢您的回复。

标签： javascript reactjs ecmascript-6

【解决方案1】：

您可以只从App 返回null，直到您收到数据，或者按照惯例，在获取完成时返回某种 UI（例如加载图标）：

在AppContainer:

this.state = { data: null }; // so ternary operator is falsey when data isn't done fetching

然后在App:

return (
  <div>
    { 
      data.data ?
        data.data.clouds.all
      :
        <img src={LOADING_ICON_HERE} />
    }
  </div>
);

它的作用是检查 prop data 是否存在。如果是，则呈现data.data.clouds.all。如果没有，它会在请求完成时显示一个加载图标。如果您不想显示任何内容，可以将其缩短为：

{ 
  data.data &&
    data.data.clouds.all
}

【讨论】：