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

它使用 react.js 来构建。

它使用的 api 是 这个网站

我从中得到的错误是

TypeError: Cannot read property 'toLowerCase' of undefined

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

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