你好,我是这个reactjs的新手,我目前在Egghead尝试了一些课程,当我尝试使用map从数据数组创建React组件时,我遇到了一些错误,我不理解,因为我已经有了相同的代码
import React from 'react'
class Filter extends React.Component{
constructor(){
super()
this.state = {
items : [],
filter :""
}
}
componentWillMount(){
fetch('https://swapi.co/api/people/?format=json')
.then(response => response.json())
.then(({results: items})=>
this.setState({items})
)
}
filter(event){
this.setState({filter: event.target.value})
}
render(){
let items = this.state.items
console.log(items)
if(this.state.filter){
items = items.filter( item =>
item.name.toLowerCase()
.include(this.state.filter.toLowerCase()))
}
return(
<div>
{this.state.filter}
<input type="text" onChange={this.filter.bind(this)}/>
{items.map(item => <Org key={item.name} org={item}/>)}
</div>
)
}
}
const Org = (props) => <h4 >{props.org.name}</h4>
export default Filter
当我尝试过滤它时,会出现这个错误,就像我不能用键名调用数组项一样,该数组是从api获取的
您正在寻找的函数是包含
。你打错了
item.name.toLowerCase().includes(this.state.filter.toLowerCase()))
如果项目类型为string
,则可以添加检查。
类似的东西:
if(项目
因为您的数组总是有可能使用类型String
以外的元素填充。