在行星列表中搜索后,原始列表不显示。

问题描述 投票:0回答:2

我加了一个搜索栏,可以搜索行星。搜索工作正常。问题是当我删除搜索栏中的文字时,它并没有更新行星列表(它们没有回到屏幕上)。

我如何解决这个问题?

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
javascript reactjs
2个回答
1
投票

你应该使用两个变量来存储行星--你从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
  })
}

然后在渲染方法中映射你的filteredPlanets。

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

1
投票

你可以用不同的方式存储初始行星和你过滤的行星。在这种情况下,我将它们存储在 filteredPlanets 在收到响应后初始设置,同时在所需事件上进行更新。这样,它总是使用最初获取的 planets 以应用过滤器。

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
© www.soinside.com 2019 - 2024. All rights reserved.