反应：拆分的类型错误：无法读取未定义的属性(读取"拆分")

Question

我试图通过apir获取数据，我有点这样做了。然而，我有分裂的问题。我尝试了所有方法，但还是出现了这个错误。我怎样才能做到呢?

我安装了这个$npm add react-split然后像这样导入:import Split from 'react-split'。这是它在代码中的用法:

import React, {Component} from "react";
import { Link } from "react-router-dom";
class PokemonDetail extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
imgUrl: '',
pokemonIndex: '',

};
}
componentDidMount() {
const {name, url} = this.props;
const pokemonIndex = url.split('/')[url.split('/').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 
});
}

Answer 1

我通过在split前插入问号解决了这个问题。我不知道原因，但它成功了。

const pokemonIndex = url?.split('/')[url?.split('/').length - 2];

感谢所有回复我帖子的人。

Answer 2

请确保调用此PokemonDetail的父组件以相同的名称发送props

这样的

class Pockemon extend Component {
render(){
return (
<>
<PokemonDetail
name='Pockemon name' // this line 
url='the url' // and this line
/>
</>
)
}
}