javascript - React 处理空 props

Question

我想渲染一个图像，我在应用程序启动时从 API 获取其 URL。当我这样做时，会出现以下消息:TypeError: Cannot read property 'icon' of undefined.
虽然 icon 是对象内的一个属性，但我可以访问其他所有内容，甚至该对象。

class Current extends React.Component {
  render() {
    console.log(this.props.current.condition);
    // Ok, first I write undefined to the console, but then the object
    console.log(this.props.current.condition.icon);
    // BAM. Doomsday.

    return (
      // Beneath me everything is totaly fine.
      <div className="Current">
        <div className="Important">
          <div>
            <img src={this} alt={this} />
            <span>{this.props.current.temp_c}</span>
          </div>
          <h1>{this.props.location.name}, {this.props.location.country}</h1>
          <p>{this.props.location.localtime}</p>
        </div>
        <h1>hey</h1>
      </div>
    );
  }
}

export default Current;

我尝试使用 ComponentWillMount 和 ComponentDiDMount 来处理该对象，但没有帮助。如何访问 icon 属性而不导致应用程序崩溃？

编辑:通过此修复:

<img 
src={typeof(this.props.current.condition) === 'undefined' ? '' : this.props.current.condition.icon} 
alt={typeof(this.props.current.condition) === 'undefined' ? '' : this.props.current.condition.text} 
/>

...但这不可能是干净的代码，对吗？

Answer 1

class Current extends React.Component {
  render() {
    const { current } = this.props
    if ( !(current && current.condition) ) return <span>Loading</span>;

    return (
      // Beneath me everything is totaly fine.
      <div className="Current">
        <div className="Important">
          <div>
            <img src={this} alt={this} />
            <span>{this.props.current.temp_c}</span>
          </div>
          <h1>{this.props.location.name}, {this.props.location.country}</h1>
          <p>{this.props.location.localtime}</p>
        </div>
        <h1>hey</h1>
      </div>
    );
  }
}

export default Current;