我加了一个搜索栏,可以搜索行星。搜索工作正常。问题是当我删除搜索栏中的文字时,它并没有更新行星列表(它们没有回到屏幕上)。
我如何解决这个问题?
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
你应该使用两个变量来存储行星--你从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>
))
}
你可以用不同的方式存储初始行星和你过滤的行星。在这种情况下,我将它们存储在 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