从状态过滤值

Question

自动完成类

import React from 'react';
import axios from 'axios';
import DeleteItem from '../DeleteItem/DeleteItem'
export default  class AutoComplete extends React.Component{
  constructor(props){
    super(props)
    this.state={
      suggestions:[],
      text:'',
      persons:[],
      delsuggestions:[],
    }
    this.delete = this.delete.bind(this);
  }

//这里我叫api

 componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons:persons });
      })
  }

//输入值

onTextChanged= (e) =>{
    const value=e.target.value;
    let suggestions=[];
    if(value.length>0){
      suggestions=this.state.persons.map(item =>(item.name))
      .filter(function(val){
        return val.indexOf(value) > -1
      })
    }
     this.setState(()=>({suggestions:suggestions,text:value}))
  }

//从列表项中选择一个值

 personSelected(value){
        this.setState(()=>({
          text:value,
         persons:[],
        }))
      }

//删除功能

handleDelete=id =>{
    let delsuggestions=[];
    this.setState(()=>({delsuggestions:[...this.state.suggestions].filter(el => el!= id)}))
    console.log('delsuggestions'+delsuggestions)
}

//列出过滤出的项目

renderPersons(){
    const {persons}=this.state
    return(
    <React.Fragment>
        {this.state.suggestions.map(item => (
          <DeleteItem
            key={item}
            searchitem={item}
            onDelete={this.handleDelete}
          />
    ))}
    </React.Fragment>

    )
  }

//渲染功能

render(){
  const {text} = this.state;
   return(<div>
      <input value={text} onChange={this.onTextChanged} type='text' style={{backgroundColor:'pink'}} /> 
      {this.renderPersons()}  
   </div>)
}
}

DeleteItem类

import React, { Component } from "react";
class DeleteItem extends Component {   
  render() {
    return (
        <div className="deletebuttom">
          {this.props.searchitem}  <button
              onClick={() => this.props.onDelete(this.props.searchitem)}
            >
              Delete
            </button>
        </div>
    );
  }

}
export default DeleteItem;

以下过滤器功能出了什么问题

handleDelete=id =>{
    let delsuggestions=[];
    this.setState(()=>({delsuggestions:this.state.suggestions.filter(el => el.id != id)}))
    console.log('delsuggestions'+delsuggestions)
}

我没有得到误解中的过滤值。当我调试el时，会显示“输入的意外末尾”。