Javascript Searchfield搜索特定的行星

我尝试添加一个搜索字段来搜索行星。 有人能帮我修一下吗

我得到的错误是： TypeError:无法读取未定义的属性“状态” 手换 C:/Users/charl/Desktop/IRONHACK/Paperbox/Paperbox/src/pages/Home.js:29 26 | } 27 | 28 | handleChange（e）{//eslint禁用下一行

29 | const planetsearchlist=this.state.planets.filter（planet=>{ |^30 |如果（行星名称）{ 31 | if（planet.name.toLowerCase（）.includes（e.target.value.toLowerCase（）））{ 32 |返回真值

---

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

尝试对

handleChange

方法使用箭头函数，如下所示：

handleChange = (e) => {

}

---

必须将函数绑定到组件，可以使用lambda函数语法定义方法：

handleChange = (e) => {}

或在构造函数中：

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

另外，您的

handleChange

函数工作不正常。您需要在filter函数之外设置state。您可以在此处找到工作示例：

---

进一步要做的事情：

您正在

handleChange

功能中直接编辑planet数组。当用户搜索字符串时，您正在从

state.planets

删除项目。因此，当用户删除搜索字符串时，旧的planets将因删除而不显示

• 你需要将行星存储在一个不变的数组中
• 完成搜索后，筛选不可变数组以创建表示数组
• 在渲染函数中显示表示数组

---

---

另外，我强烈建议您查看文档，了解如何将函数传递给组件：

您应该在构造函数中绑定handleChange方法，如：

this.handleChnage=this.handleChange.bind（this）

你应该使用箭头功能

handleChange=（e）=>{

---

}

它与闭包和

这个关键字有关，在javascript中，您在
Home
组件中定义
handleChange
，但您将其作为
onClick
的回调传递，它实际上不在
Home
=>中调用，这不再是
Home
的上下文。
有4种方法可以解决这个问题。
使用箭头函数定义函数（我喜欢这种方式）：

在渲染中使用数组函数：


//其他代码
this.handleChange（事件）}>
//其他代码
这是否回答了您的问题？好的，谢谢！引用错误：在初始化之前无法访问“planetssearchlist”现在是我的错误！有人知道原因吗？您是否查看了链接中的代码：。如果您已经查看了，您可以更新问题中的代码吗？好的，谢谢！引用错误：在初始化之前无法访问“planetssearchlist”现在是我的错误！任何知道原因的人？好的，谢谢！引用错误：在初始化之前无法访问“planetssearchlist”现在是我的错误！任何知道原因的人？好的，谢谢！引用错误：在初始化之前无法访问“planetssearchlist”现在是我的错误！任何知道原因的人？因为您正在
this.state.planet内部使用它s、 过滤器
如果
飞机搜索列表
尚未初始化，请将其带到外部。请检查我的更新答案
this.handleChange = this.handleChange.bind(this)

        or 

handleChange = (event) => {}