为什么我得到 TypeError: Cannot read property 'toLowerCase' of undefined答案

【问题标题】：Why i got TypeError: Cannot read property 'toLowerCase' of undefined为什么我得到 TypeError: Cannot read property 'toLowerCase' of undefined
【发布时间】：2019-08-13 00:09:40
【问题描述】：

我正在建立一个名为 starwarplanet 的网站。

它使用 react.js 构建。

它使用的api是this website

我得到的错误是

TypeError: Cannot read property 'toLowerCase' of undefined

我只想展示这个星球的name,diameter 和rotation_period。

我的app.js 或card.js 有什么问题？

在app.js:

import React,{Component} from 'react';
import CardList from '../Components/CardList';
import SearchBox from '../Components/SearchBox';
import Scroll from '../Components/Scroll';
import './App.css';

class App extends Component{
    constructor(){
        super()
        this.state={
            planets:[],
            searchfield:''
        }
     }
     componentDidMount() {
        const urls = [
           'https://swapi.co/api/planets/',
           'https://swapi.co/api/planets/?page=2', 
           'https://swapi.co/api/planets/?page=3',
           'https://swapi.co/api/planets/?page=4',
           'https://swapi.co/api/planets/?page=5',
           'https://swapi.co/api/planets/?page=6',
           'https://swapi.co/api/planets/?page=7'
    ]
    
    Promise.all(urls.map(async url => {
        const response = await fetch(url);
        const morePlanets = await response.json();
        var combinedArrayOfPlanets = this.state.planets;
        combinedArrayOfPlanets.push(morePlanets.results);
        
        var sortedArrayOfPlanets = combinedArrayOfPlanets
            .flat()
            .sort((a, b) => a.name.localeCompare(b.name));
        
        this.setState({planets: sortedArrayOfPlanets})
    }))
    .catch(error => 
        console.log('Error during fetching of planets:', error)
    );
}

onSearchChange = (event) => {
    this.setState({ searchField: event.target.value })
}
render(){
    const {planets,searchField} = this.state;
    const filteredPlanets = planets.filter(planet=>{
        return planet.name.toLowerCase().includes(
            searchField.toLowerCase())
            ||
            planet.diameter.toLowerCase().includes(
                searchField.toLowerCase())
            ||
            planet.rotation_period.toLowerCase().includes(
                searchField.toLowerCase())
    })
    return !planets.length?
    (
        <div className='tc'>
                    <h1>Loading</h1>:
        </div>
    ):
    (
    <div className='tc'>
        <h1 className='f2'>StarWarPlanet</h1>
        <SearchBox searchChange={this.onSearchChange}/>
        <Scroll>
            <CardList planets = {filteredPlanets}/>
        </Scroll>
    </div>
    );
   }
  }

 export default (App);

在Card.js:

import React from 'react';

const Card = ({name,diameter,rotation_period}) =>{
    return(
       <div className="bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5">
            <div>
                <h2>{name}</h2>
                <p>{diameter}</p>
                <p>{rotation_period}</p>
            </div>
       </div>
    );
   }

   export default Card;

【问题讨论】：

标签： reactjs

【解决方案1】：

当您想要对不存在的东西执行操作时会出现错误。您似乎在其父级中不存在的某些属性上运行toLowerCase。检查错误日志以获取确切的行号。您将了解您正在尝试访问哪些不存在的属性。

应该是以下之一：

planet.name.toLowerCase()
planet.diameter.toLowerCase()
planet.rotation_period.toLowerCase()

所以检查以确保行星具有所有 3 个属性：name、diameter 和 rotation_period。如果是，请确保您使用了正确的拼写。

【讨论】：

感谢您的回答。正确的拼写是正确的。我错过了搜索这种词，它应该是searchField
@Jacky Cheers，它发生了。

【解决方案2】：

这可能是由于数据不是完美的字符串格式。尝试添加.toString() 然后尝试添加.toLowerCase()

【讨论】：

基于错误，由于undefined.toLowerCase() 而引发的错误我认为添加.toString() 可能无法解决问题，因为我们无法在undefined 上应用toString()变量也一样？

【解决方案3】：

您的组件正在尝试在数据获取完成之前呈现。您已签入您的代码，但您需要在对数据进行任何处理之前移动它：

render() {
    const {planets,searchField} = this.state;

    if (!planets.length) {
        return <div className='tc'><h1>Loading</h1></div>;
    }

    const filteredPlanets = planets.filter(planet=>{
        return planet.name.toLowerCase().includes(
            searchField.toLowerCase())
            ||
            planet.diameter.toLowerCase().includes(
                searchField.toLowerCase())
            ||
            planet.rotation_period.toLowerCase().includes(
                searchField.toLowerCase())
    })
    return (
        <div className='tc'>
            <h1 className='f2'>StarWarPlanet</h1>
            <SearchBox searchChange={this.onSearchChange}/>
            <Scroll>
                <CardList planets = {filteredPlanets}/>
            </Scroll>
        </div>
    );
}

【讨论】：