я новичок, чтобы реагировать, пытаясь создать сайт Todolist, у меня есть готовые функции добавления, удаления и отображения, просто пытаюсь добавить функцию поиска, но я не могу заставить ее работать, где она не фильтруетсядолжным образом.
В основном я хочу иметь возможность фильтровать значения в todos.title с поисковым значением.например, если я введу значение «ta», то должно отобразиться элемент «todo trash» или любой элемент, соответствующий этой строке.
, когда я пытаюсь выполнить поиск, он выдает случайные результаты элементов из отфильтрованного, мне интересно, если моя фильтрация неправильная или мне не нравится ее корректное отображение.
Я пытался пройтизначение в todo.js и отобразить его там, но не кажется, что это приемлемый путь, так как он должен оставаться в App.js.
class App extends Component {
state = {
todos: [
{
id: uuid.v4(),
title: "take out the trash",
completed: false
},
{
id: uuid.v4(),
title: "Dinner with wife",
completed: true
},
{
id: uuid.v4(),
title: "Meeting with Boss",
completed: false
}
],
filtered: []
};
// checking complete on the state
markComplete = id => {
this.setState({
todos: this.state.filtered.map(todo => {
if (todo.id === id) {
todo.completed = !todo.completed;
}
return todo;
})
});
};
//delete the item
delTodo = id => {
this.setState({
filtered: [...this.state.filtered.filter(filtered => filtered.id !== id)]
});
};
//Add item to the list
addTodo = title => {
const newTodo = {
id: uuid.v4(),
title,
comepleted: false
};
this.setState({ filtered: [...this.state.filtered, newTodo] });
};
// my attempt to do search filter on the value recieved from the search field (search):
search = (search) => {
let currentTodos = [];
let newList = [];
if (search !== "") {
currentTodos = this.state.todos;
newList = currentTodos.filter( todo => {
const lc = todo.title.toLowerCase();
const filter = search.toLowerCase();
return lc.includes(filter);
});
} else {
newList = this.state.todos;
}
this.setState({
filtered: newList
});
console.log(search);
};
componentDidMount() {
this.setState({
filtered: this.state.todos
});
}
componentWillReceiveProps(nextProps) {
this.setState({
filtered: nextProps.todos
});
}
render() {
return (
<div className="App">
<div className="container">
<Header search={this.search} />
<AddTodo addTodo={this.addTodo} />
<Todos
todos={this.state.filtered}
markComplete={this.markComplete}
delTodo={this.delTodo}
/>
</div>
</div>
);
}
}
export default App;
значение поиска исходит из заголовка, в который передается значениечерез как реквизит.Я проверил это, и он отлично работает.
Todos.js
class Todos extends Component {
state = {
searchResults: null
}
render() {
return (
this.props.todos.map((todo) => {
return <TodoItem key={todo.id} todo = {todo}
markComplete={this.props.markComplete}
delTodo={this.props.delTodo}
/>
})
);
}
}
TodoItem.js - это просто компонент, который отображает элемент.
Я не уверен, достаточно ли этого, чтобы понять проблему на 100%,я могу добавить больше, если нужно.
Спасибо