ReactJS 状态或逻辑运算符总是导致类型错误答案

【问题标题】：ReactJS State OR Logical Operator always causing type errorReactJS 状态或逻辑运算符总是导致类型错误
【发布时间】：2020-03-01 04:49:48
【问题描述】：

我为仍然抛出错误的组件设置了一个简单的状态：TypeError: Cannot read property 'year' of undefined 使用以下代码：

export default class Login extends Component {
  state = {
    isLoading: false,
    events: this.props.events,
    activeDate: {
      year: this.props.events[0].year || "",
      month: this.props.events[0].months[0].month || "",
    }
  };

  //...

}

我无法理解为什么会出现此错误，而不仅仅是将值设置为 null。 undefined 应该将二进制操作呈现为 false 并默认为 ""。谁能解释一下？

【问题讨论】：

我猜你想用 ESnext 写的是year: this?.props?.events?.[0]?.year || "",（见optional chaining），但它还没有被广泛使用（总是可以使用 babel）。问题是，this.props.events[0] 是 undefined，因此没有名为 year 的属性。
在某些时刻，即使是短暂的时刻，事件是未定义的或空的。您需要添加默认值或增强处理空数组或未定义的逻辑。这可以是在父级添加默认值。据说从道具派生状态是一种反模式。 reactjs.org/blog/2018/06/07/…
@AlexanderStaroselsky 谢谢你！这篇文章确实帮助我弄清楚了一些事情。

标签： javascript reactjs logical-operators

【解决方案1】：

我没有使用year: this.props.events[0].year || ""，而是发现它同样有效，year: "" && this.props.events[0].year。 AND 运算符将等于最后一个真值。

但是，正如@AlexanderStaroselsky 指出的那样，这不是最佳实践。有关详细信息，请参阅此article。

【讨论】：

【解决方案2】：

您可以验证数组中位置 0 的对象不为空，然后使用&& 之前访问数组对象的属性。最后，当两个条件都给出null 或undefined 时，添加|| 以指定默认值。

this.props.events[0] && this.props.events[0].year || ""

【讨论】：