什么也没有发生，因为 onclickList元素返回一个 DOM 但你没有在任何地方显示它。

你应该这样做

class TodoList extends Component {
        state = {
            displayTodos: []
         }
        render() {

        console.log(this.props.todos)
        return  (
          <div className='todo'>
          <form id="frm1">
                Add To Do: <input type="text" name="fname" id="todo" /><br></br>
                <input type="button" onClick={()=> this.props.actions.addTodo(document.getElementById("todo").value)} value="Submit" />
          </form>
          <div className="visible">
           <ul className=" visibility">
           <li onClick={ () => {
             var todos = []
             todos = this.props.todos.map(todo => {
               return (<p> {todo.text} </p>)
             })
             this.setState({displayTodos: todos})
           }}>

              AllToDos


          </li>

           <li onClick={() => {
             var todos = [];
              this.props.todos.filter(todo => {
               if(todo.completed===true) {
                 todos.push(<p> {todo.text} </p>)
               }
              })
              this.setState({displayTodos: todos})
              }}>

              CompletedToDos

           </li>

           <li onClick={() => {
             var todos = []
             this.props.todos.filter(todo => {
               if(todo.completed===false) {
                 todos.push(<p> {todo.text} </p>)
               }
             })
             this.setState({displayTodos: todos})
              }}>

              NotCompletedToDos

           </li>

            </ul>
            <div>{this.state.displayTodos}</div>
          </div>
          <ul className='todo__list'>
             {this.props.todos.map(t => (
               <li key={t.id} className='todo__item' onClick={() => this.props.actions.toggleTodo(t.id)}>
                 <Todo todo={t} />
               </li>
             ))}
           </ul>
          </div>
        )
      }
    }

另外我会亲自调用一个函数onClick而不是做每一个内联来增加代码readability

抱歉，但是我不知道点击函数的目标是什么，它不会改变组件状态或props，所以这个组件不会渲染。

<li onClick={() => {
     return (<div> {this.props.todos.filter(todo => {
       if(todo.completed===true) {
         return (<p> {todo.text} </p>)
       }

     })}</div>)
      }}>

      CompletedToDos

   </li>

   <li onClick={() => {
     return ( <div> {this.props.todos.filter(todo => {
       if(todo.completed===false) {
         return (<p> {todo.text} </p>)
       }
     })}</div>)
      }}>

      NotCompletedToDos

   </li>