React中TypeError: Cannot read property 'substr' of null问题求助

嘿，这个报错的原因很明确——你的eventDesc有时候是null或者undefined，这时候去调用它的substr方法自然会抛出错误，因为null/undefined并没有这个方法。下面给你几个实用的解决办法：

方法1：使用可选链+空值合并（ES2020+推荐） #

这是最简洁的写法，利用ES新语法快速处理空值情况：

{eventDesc?.substr(0, 140) ?? ''}

• ?.：会先检查eventDesc是否为null/undefined，如果是就直接返回undefined，不会继续调用substr
• ??：把前面的undefined转换成空字符串，避免页面上显示undefined字样

方法2：三元运算符（兼容性更好） #

如果你的项目需要兼容不支持ES2020的环境，用三元判断更稳妥：

{eventDesc ? eventDesc.substr(0, 140) : ''}

它会先判断eventDesc是否为“真值”（非null、非undefined、非空字符串等），满足条件才执行截取，否则返回空字符串。

方法3：从源头初始化默认值 #

在组件的state里给eventDesc设置默认值，从根源避免null的出现：
修改构造函数中的state初始化代码：

constructor(props) {
  super(props);
  this.state = {
    eventName: props.eventName || '',
    eventDate: props.eventDate || '',
    eventDesc: props.eventDesc || '', // 这里给个空字符串默认值
    eventPic: props.eventPic || ''
  }
}

这样即使父组件传入的eventDesc是null，state里的eventDesc也会是空字符串，调用substr就不会报错了。

方法4：抽离成处理函数（更易维护） #

如果后续需要扩展截取逻辑（比如添加省略号），把逻辑抽成组件方法会更清晰：

class Card extends Component {
  // ... 其他代码 ...
  
  getTruncatedDescription = () => {
    const { eventDesc } = this.state;
    if (!eventDesc) return '';
    // 还可以在这里加个判断，如果原内容超过140字符就加省略号
    return eventDesc.length > 140 ? `${eventDesc.substr(0, 140)}...` : eventDesc;
  }

  render () {
    const { eventDate, eventName, eventPic } = this.state;
    return (
      // ... 其他JSX代码 ...
      <p className="f6 lh-copy measure mt2 mid-gray">
        {this.getTruncatedDescription()}
      </p>
      // ... 其他JSX代码 ...
    )
  }
}

另外提一句：现在React官方更推荐使用函数组件+Hooks开发，如果是新项目的话可以考虑重构，但上面的方法在类组件里都是完全适用的~

内容的提问来源于stack exchange，提问作者Ricardo Sawir