Question

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

它使用react.js进行构建。

它使用的api是this website

我从中得到的错误是 TypeError：无法读取未定义的属性“ toLowerCase”

我只想显示行星的名称，直径和自转周期。

我的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;

Answer 1

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

Answer 2

当您要对不存在的对象执行操作时，会出现错误。您似乎正在其父项不存在的某些属性上运行toLowerCase。检查错误日志中的确切行号。您将了解要尝试访问的不存在的资源。

它应该是其中之一：

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

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

Answer 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>
    );
}

为什么我遇到TypeError：无法读取未定义的属性“ toLowerCase”

3 个答案: