过滤React js

Question

我需要帮助简单过滤待办事项列表我已设法删除和添加任务工作良好，但现在我正在尝试过滤添加的任务，我得到错误消息我是完全初学者所以请保持记住谢谢！

TypeError：无法读取未定义

的属性'setState'

  

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;

列表

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)未绑定到this。

将其重新定义为箭头功能。

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

Answer 2

像使用其他人一样使用箭头功能：

searchChanged = (evt) => {