Question

EDIT: heres the console.log(data) the data is displaying fine, it's just not filtering the data properly..]
!https://imgur.com/a/SsEDAKj!

编辑2：this.state.items是一个数组。

我正在尝试实现搜索功能，该功能允许用户搜索从API返回的数据。我不断收到以下错误：

“ TypeError：data.filter不是函数”

constructor(){

    super();

    this.state ={
        items: [],
        sessions: [],
        loading: true,
        search: '',
        direction: 'asc',
        filteredPosts: [],
        query: ''
    }

    this.onSort = this.onSort.bind(this);
    this.searchTerm = this.searchTerm.bind(this);
    //this.filteredPosts = this.filteredPosts.bind(this);

}

searchTerm =(event) =>{
    const query = event.target.value;
    this.setState({query}, () => this.filterData());
}

filterData(){
    let data = this.state.items;
    let src = this.state.query;

    data = data.filter(function(data){
        return data.indexOf(src) != -1;
    });
    this.setState({filteredPosts: data});
    console.log(this.state.filteredPosts);
}
async getTalks(){
    const response = await fetch ('PRIVATE_API');
    const data = await response.json();
    //console.log(data);
    this.setState({items: data});
}

async componentDidMount(){
    this.getTalks();

}

render(){
    return (

    <div className="container-fluid m-0">
        <div className="row h-100">
            <div className="col-12 ml-0"><h2>Conference Talks</h2>
            <p>You can search the talks via title, speaker or tags</p>
            <input className="form-control mb-2" id="search" type="text" onChange={this.searchTerm} placeholder="search"></input></div>
            <table className="table table-hover table-dark">
                <thead>
                </thead>
                <tbody id ="list">
            {this.state.items.map(function(item,index){
                    return(
                        <tr key = {index}>
                            <th data-title="id"scope="row">{item.id}</th>
                            <td data-title="title" style={{cursor: "pointer"}} title data-original-title={"Click to sort"} data-toggle="title" >{item.title}</td>
                            <td data-title="description" id="desc">{item.description}</td>
                            <td data-title ="speaker">{item.speaker}</td>
                            <td >{item.session}</td>
                            <td >{item.tags}</td>
                            <td >{item.time}</td>
                            <td >{avg}</td>

在尝试筛选拉出的数据时，我找不到正确的方向。我犯什么错误？（我只包含了相关事件代码）

Answer 1

您是否进行过检查以查看数据是否存在？这些项目可能在首次渲染时不可用，从而导致此问题。也许像

{this.state.items.length > 0 && this.state.items.map(function(item,index){
//rest of your code here

另外，我注意到您正在引入一个加载变量。如果可以，您可以

if(loading){ return (<LoadingComponent />}else{ //regular return statement

Answer 2

问题是我没有返回对象属性。

data = data.filter(function(data){
        return **data.title**.toLowerCase().indexOf(src) !== -1;
    });

实现搜索功能时出现问题“ TypeError：data.filter不是函数”

2 个答案: