Question

我刚做出反应，试图建立一个待办事项列表网站，我已经完成了添加，删除和显示功能，只是试图添加搜索功能，但是我似乎无法使其正常运行，因为它没有过滤正确地。

我基本上希望能够使用搜索值来过滤todos.title上的值。例如，如果我输入值“ ta”，则应显示“取出垃圾箱”的待办事项或与该字符串匹配的任何项目。

当我尝试搜索时，它会随机提供过滤后的项目输出，我想知道我的过滤是否错误或我是否不喜欢正确显示它。

ive试图将值传递到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％理解该问题，我可以根据需要添加更多内容。

谢谢

Answer 1

不确定脚本有什么问题。在我看来，当我尝试使用您的大多数逻辑进行重构时，效果很好。请在此处查看工作演示：https://codesandbox.io/s/q9jy17p47j

仅凭我的猜测，您的<TodoItem/>组件可能存在问题，导致无法正确呈现。也许您可以尝试使用诸如<li>之类的原始元素，而不是诸如<TodoItem/>之类的自定义元素。问题可能出在您markComplete()事物的逻辑上（如果它正在执行隐藏元素的工作）。

如果我缺少什么，请告诉我。谢谢。

如何使用.filter在Reactjs中的todolist应用程序中添加过滤器

1 个答案: