Javascript 原始列表没有'；在行星列表中搜索后不会出现

我添加了一个可以搜索行星的搜索栏。搜索有效。问题是，当我删除搜索字段中的文本时，它不会更新行星列表（它们不会回到屏幕上）

我怎样才能解决这个问题

import React, { PureComponent } from 'react'
import axios from 'axios'

class Home extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      planets: [],
    }

    this.handleChange = this.handleChange.bind(this)
  }

  componentDidMount() {
    axios({
      method: 'GET',
      url: 'https://swapi.dev/api/planets/',
    })
      .then(response => {
        console.log(response)
        let planetslist = response.data.results
        this.setState({ planets: planetslist })
      })
      .catch(error => {
        console.log("You've made an error with the planets load charles: ", error)
      })
  }

  handleChange(e) {
    // eslint-disable-next-line
    let planetssearchlist = this.state.planets.filter(planet => {
      if (planet.name) {
        if (planet.name.toLowerCase().includes(e.target.value.toLowerCase())) {
          return true
        }
      }
    })
    this.setState({
      planets: planetssearchlist,
    })
  }

  render() {
    return (
      <div>
        <h1>Star Wars Planets</h1>

        <form>
          <input
            placeholder="searchbar"
            type="text"
            onChange={this.handleChange}
          ></input>
        </form>

        {this.state.planets.map((planet, i) => (
          <p key={i}>{planet.name}</p>
        ))}
      </div>
    )
  }
}

export default Home

import React，{PureComponent}来自“React”
从“axios”导入axios
类Home扩展了PureComponent{
建造师（道具）{
超级（道具）
此.state={
行星：[]，
}
this.handleChange=this.handleChange.bind（this）
}
componentDidMount（）{
axios({
方法：“GET”，
网址：'https://swapi.dev/api/planets/',
})
。然后（响应=>{
console.log（响应）
让planetslist=response.data.results
this.setState（{planets:planetslist}）
})
.catch（错误=>{
log（“您在加载时出错：，错误”）
})
}
手变（e）{
//eslint禁用下一行
让planetsearchlist=this.state.planets.filter（planet=>{
如果（行星名称）{
if（planet.name.toLowerCase（）.includes（e.target.value.toLowerCase（）））{
返回真值
}
}
})
这是我的国家({
行星：行星搜索列表，
})
}
render（）{
返回(
星球大战行星
{this.state.planets.map（（planet，i）=>(
{planet.name}
))}
)
}
}
导出默认主页

您可以将初始行星的存储方式与筛选的行星不同。在这种情况下，我将它们存储在

filteredPlanets

中，在接收到响应后初始设置，同时根据所需事件进行更新。这样，它总是使用最初获取的

行星

应用过滤器

import React, { PureComponent } from 'react'
import axios from "axios";

class Home extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            planets: [],
            filteredPlanets: []
        }

        this.handleChange = this.handleChange.bind(this)
    }

    componentDidMount(){
        axios({
            method: "GET",
            url: "https://swapi.dev/api/planets/"
        })
        .then(response => {
            console.log(response)
            let planetslist = response.data.results;
            this.setState({planets: planetslist, filteredPlanets: planetslist})
        })
        .catch(error => {
            console.log("You've made an error with the planets load charles: ",error)
        })
    }

    handleChange(e){ // eslint-disable-next-line
        let planetssearchlist = this.state.planets.filter(planet => {
             if(planet.name){
                if(planet.name.toLowerCase().includes(e.target.value.toLowerCase())){
                    return true 
                }   
            }
        })
        this.setState({
            filteredPlanets: planetssearchlist
        })
    }

    render() {
        return (

        <div>
            <h1>Star Wars Planets</h1>

            <form>
                <input placeholder="searchbar" type="text" onChange={this.handleChange}></input>
            </form>

            {
                this.state.filteredPlanets.map((planet,i) => (
                        <p key={i}>{planet.name}</p>
                ))   
            }

        </div>    

        )
    }
}

export default Home

import React，{PureComponent}来自“React”
从“axios”导入axios；
类Home扩展了PureComponent{
建造师（道具）{
超级（道具）
此.state={
行星：[]，
过滤平面：[]
}
this.handleChange=this.handleChange.bind（this）
}
componentDidMount（）{
axios({
方法：“获取”，
url:“https://swapi.dev/api/planets/"
})
。然后（响应=>{
console.log（响应）
让planetslist=response.data.results；
this.setState（{planets:planetslist，filteredPlanets:planetslist}）
})
.catch（错误=>{
log（“您在加载时出错：，错误”）
})
}
handleChange（e）{//eslint禁用下一行
让planetsearchlist=this.state.planets.filter（planet=>{
如果（行星名称）{
if（planet.name.toLowerCase（）.includes（e.target.value.toLowerCase（）））{
返回真值
}   
}
})
这是我的国家({
过滤飞机：飞机搜索列表
})
}
render（）{
返回(
星球大战行星
{
this.state.filteredPlanets.map（（行星，i）=>(
{planet.name}
))   
}
)
}
}
导出默认主页

您应该使用两个变量来存储行星—从API回调接收的变量和过滤后的行星

this.state = {
  planets: [],
  filteredPlanets: [],
}

将planets和filteredPlanets设置为从端点接收的值，以便最初显示它们

componentDidMount(){
    axios({
        method: "GET",
        url: "https://swapi.dev/api/planets/"
    })
    .then(response => {
        console.log(response)
        let planetslist = response.data.results;
        this.setState({planets: planetslist, filteredPlanets: [...planetslist]})
    })
    .catch(error => {
        console.log("You've made an error with the planets load charles: ",error)
    })
}

当文本更改时，过滤原始行星列表。 如果没有文本，请重置筛选的行星

handleChange(e){
  if (!e.target.value) {
    this.setState(prevState => ({
      filteredPlanets: [...prevState.planets],
    }))
    return
  }
  // eslint-disable-next-line
  let planetssearchlist = this.state.planets.filter(planet => {
       if(planet.name){
          if(planet.name.toLowerCase().includes(e.target.value.toLowerCase())){
              return true 
          }   
      }
      return false
  })
  this.setState({
      filteredPlanets: planetssearchlist
  })
}

然后在render方法中映射FilteredPlanet

{
  this.state.filteredPlanets.map((planet,i) => (
    <p key={i}>{planet.name}</p>
  ))   
}

{
this.state.filteredPlanets.map（（行星，i）=>(
{planet.name}
))   
}