首页 > 解决方案 > TypeError: item.name.toLowerCase(...).include 不是函数 reactjs

问题描述

你好,我是这个 reactjs 的新手,我目前在 Egghead 尝试一些课程,当我尝试关于使用映射从数据数组创建 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 获取

标签: reactjs

解决方案


您正在寻找的功能是includes. 你犯了一个小错误

item.name.toLowerCase().includes(this.state.filter.toLowerCase()))

推荐阅读