反应处理空道具

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

尝试

src={this.props.current.condition && this.props.current.condition.icon}

Answer 2

测试变量是否未定义的正确方法是这样的：

this.props.current.condition === undefined

不需要使用 typeof() 因为 undefined 在 JavaScript 代码中是一个有效值。

您可以在条件中简化它，因为 undefined 已被视为 "falsy"。这意味着您可以直接在 if 语句中使用 undefined 值。在 React 中，常见的成语是这样的：

this.props.current.condition && this.props.current.condition.icon

如果 this.props.current.condition 为 undefined，则计算结果为 undefined。否则，它将评估为 this.props.current.condition.icon.

的值

为了更深入的理解，我建议你在JavaScript中了解"truthiness"和"falsiness"。我还建议您了解布尔运算符和短路。

Answer 3

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;

反应处理空道具

React handle empty props

javascript

undefined

reactjs