Question

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

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

我一直在寻找可能的原因，但我一直无法找到任何理由，为什么在将它们放入容器组件并传递到表示组件后它们将被定义为未定义。

CodePen：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' )
);

Answer 1

您可以从null返回App直到收到数据，或者，作为惯例，在获取完成时返回某种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>
);

这样做是检查道具data是否存在。如果是，则呈现data.data.clouds.all。如果没有，它会在请求完成时显示加载图标。如果您不想展示任何内容，可以将其缩短为：

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

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

1 个答案: