小编Bri*_* Le的帖子

我创建了一个简单的待办事项列表来学习 React，我正在尝试添加一些附加功能。目前我正在尝试添加切换项目列表的按钮，因此它要么显示所有任务，要么只显示已完成的任务。

我已经编写了一个函数来更改我的可见性过滤器的状态，以便我以后可以使用它来切换列表中的项目，但它的行为不应该如此。

我控制台记录了 visabilityFilter 变量，但在更改为正确状态之前它总是显示错误的状态。例如，“全部显示”按钮将控制台日志“显示完成”，然后如果您再次按下它，它将控制台日志“全部显示”

应用程序.js

import React, { Component } from 'react';
import './App.css';
import TodoList from './components/TodoList.js'
import VisabilityFilter from './components/VisabilityFilter.js'

export const SHOW_ALL = 'show_all'
export const SHOW_COMPLETED = 'show_completed'

class App extends Component {
  constructor (props) {
    super(props)

    this.state = {
      inputValues: {
        'newTodo': ''
      },
      todos: [
        {
          task: 'My First Todo',
          completed: false
        }
      ],
      visabilityFilter: SHOW_ALL
    }

    this.addTodo = this.addTodo.bind(this)
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleKeyUp = this.handleKeyUp.bind(this)
    this.toggleCompleted = this.toggleCompleted.bind(this)
    this.removeTodo = this.removeTodo.bind(this) …