React调用split方法报Cannot read properties of undefined错误如何解决

错误根因 #

1. 你安装的react-split为无用依赖，你代码中调用的是JavaScript原生字符串的split()方法，和该UI组件包完全无关，不需要引入这个包。
2. 报错的直接原因是componentDidMount中读取的this.props.url为undefined，非字符串类型的变量无法调用split方法。

修复步骤 #

• 首先删除无用依赖，执行命令：
  $npm remove react-split
  同时删除代码中import Split from 'react-split'的引入语句。
• 调整componentDidMount逻辑，增加url有效性判断，修改后的代码如下：

import React, {Component} from "react";
import { Link } from "react-router-dom";

class PokemonDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            imageUrl: '',
            pokemonIndex: '',
        };
    }
    componentDidMount() {
        const {name, url} = this.props;
        // 校验url为有效字符串再执行后续逻辑
        if (typeof url === 'string' && url) {
            const urlSegmentArr = url.split('/');
            const pokemonIndex = urlSegmentArr[urlSegmentArr.length - 2];
            const imageUrl = `https://github.com/PokeAPI/sprites/blob/master/sprites/pokemon/${pokemonIndex}.png?raw=true`;
            
            this.setState ({
               name: name,
               imageUrl: imageUrl,
               pokemonIndex: pokemonIndex 
            });
        } else {
            // 调试用：可确认父组件传参是否正常
            console.log('当前组件接收的props：', this.props)
        }
    }
}

• 检查父组件调用PokemonDetail的逻辑，确保父组件在拿到有效url参数后再渲染该组件，或者给url参数设置默认值，避免初始渲染时传入空值。

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