TypeError: Невозможно прочитать свойство 'substr' с нулевым значением - React

Question

У меня есть такой код в React ...

import React, { Component } from 'react';

class Card extends Component {
constructor(props) {
    super(props);
    this.state = {
        eventName: props.eventName,
        eventDate: props.eventDate,
        eventDesc: props.eventDesc,
        eventPic: props.eventPic
    }
}

render () {

    const { eventDate, eventDesc, eventName, eventPic } = this.state;
    return (
        <article className="br2 ba dark-gray b--black-10 dib ma3 mw5 shadow-hover">
            <img src={eventPic} className="db w-100 br2 br--top" alt={eventName} />
            <div className="pa2 ph3-ns pb3-ns">
                <div className="dt w-100 mt1">
                    <div className="dtc">
                        <h1 className="f5 f4-ns mv0">{eventName}</h1>
                    </div>
                    <div className="dtc tr">
                        <h2 className="f5 mv0">{eventDate}</h2>
                    </div>
                </div>
                <p className="f6 lh-copy measure mt2 mid-gray">
                    {eventDesc.substr(0, 140)}
                </p>
            </div>
        </article>
    )
}
}

export default Card;

Проблема у меня в этом блоке кода

{eventDesc.substr(0, 140)} // This is meant to limit the eventDescription's chars.

он дает мне TypeError: Не удается прочитать свойство'substr' of null.

Не могли бы вы помочь мне, как преодолеть эту ошибку?Спасибо

Answer 1

в основном вы присваиваете значение eventDesc со значением по умолчанию props.eventDesc.но если вы не передаете это значение (должно быть undefined) ИЛИ вы передаете значение null, вы получите такое поведение.

вы можете добавить значение по умолчанию для вашего рендера, чтобы решить эту проблему:

const { eventDate ="", eventDesc = "", eventName = "", eventPic = "" } = this.state;

но лучше всего иметь значение по умолчанию для конструктора, чтобы вы делали это только один раз:

constructor(props) {
    super(props);
    this.state = {
        eventName: props.eventName || "",
        eventDate: props.eventDate || "",
        eventDesc: props.eventDesc || "",
        eventPic: props.eventPic || ""
    }
}