类型错误：无法读取 null 的属性'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.

它给了我一个类型错误：无法读取 null 的属性"substr"。

你能帮我如何克服这个错误吗？谢谢

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 || ""
}
}