Filtering Reaktion js

Question

Ich brauche Hilfe mit einfachen Filtern Todo-Liste Ich habe es geschafft zu entfernen und Hinzufügen von Aufgaben zu funktioniert gut, aber jetzt versuche ich durch zusätzliche Aufgaben zu filtern, und ich bekomme die Fehlermeldung, ich bin völlig Anfänger so Bitte denken Sie daran Danke!

Typeerror: kann Eigenschaft 'setState' undefinierter

26 | this.setState({query: evt.target.value});

import React, {Component} from 'react'; 
import '../App.css'; 
import Form from './Form'; 
import List from './List'; 

class App extends Component { 

state = { 
    query: '', 
    inputValue: "", 
    todos: [ 
     {value: 'Naumiej się Reacta', done: false}, 
     {value: 'Pucuj trzewiki ', done: true}, 
    ] 
} 
handleChange = (evt) => { 
    this.setState({inputValue: evt.target.value}); 
} 
removeMe = (index) =>{ 
    this.setState({ 
     todos: this.state.todos.filter((_, i) => i !== index) 
    }) 
} 

searchChanged(evt) { 
    this.setState({query: evt.target.value}); 
} 

handleSubmit = (evt) => { 
    evt.preventDefault(); 
    const newTodo = { 
     value: this.state.inputValue 
    }; 
    const todos = this.state.todos; 
    todos.push(newTodo); 
    this.setState({todos: todos, inputValue: ''}) 

} 

render() { 
    return (
     <div className="App"> 
      <input type="text" placeholder="Search..." onChange= 
{this.searchChanged} /> 
      <Form 
       handleChange={this.handleChange} 
       inputValue={this.state.inputValue} 
       handleSubmit={this.handleSubmit} 

      /> 
      <List 
       removeMe={this.removeMe} 
       todos={this.state.todos} 
       query={this.state.query} 
      /> 
     </div> 
    ); 
} 
} 

export default App; 

Liste

import React, {Component} from 'react'; 
import Task from './Task'; 
class List extends Component { 

render() { 
    let serchedTasks = this.props.todos.filter(
     (todos) => { 
      return todos.value.indexOf(this.props.query) !== -1; 
     } 
    ); 
    return (
     <div className="List"> 
      {serchedTasks.map((todo, index) => { 
       return (
        <Task 
         key={index} 
         index={index} 
         removeMe={this.props.removeMe} 
         todo={todo} 
        /> 
       ) 
      })} 

     </div> 
    ) 
} 
} 
export default List; 

Answer 1

searchChanged(evt) ist nicht auf this gebunden lesen.

Definieren Sie es als eine Pfeilfunktion neu.

searchChanged = (evt) => { 
    this.setState({query: evt.target.value}) 
} 

Answer 2

einen Pfeil Funktion können Sie, wie Sie mit den anderen tat:

searchChanged = (evt) => {