ReactJS Состояние ИЛИ Логический оператор, всегда вызывающий ошибку типа

Question

У меня есть простая настройка состояния для компонента, который все еще выдает ошибку: 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 || "",
    }
  };

  //...

}

У меня возникают проблемы с пониманием, почему эти ошибки вместо просто установки значение до нуля. undefined должен отображать двоичную операцию как ложную и по умолчанию "". Кто-нибудь может объяснить?

Answer 1

Вы можете проверить, что объект в массиве в позиции 0 не равен нулю, затем использовать && перед тем, как получить доступ к свойству объекта массива. Наконец, добавьте ||, чтобы указать значение по умолчанию, когда оба условия дают null или undefined.

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

Answer 2

Вместо использования year: this.props.events[0].year || "" я обнаружил, что это работает так же хорошо, year: "" && this.props.events[0].year. Оператор AND будет соответствовать последнему истинному значению.

Но, как отметил @Staroselsky, это не лучшая практика. См. статью для более подробной информации.