react待办事项列表将在控制台中清除，但不会从屏幕中清除

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  const handleClear = () => {
    setTodos([]);
    console.log('待办事项列表已清除');
  };

  return (
    <div>
      <h1>待办事项列表</h1>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={handleClear}>清除列表</button>
    </div>
  );
}

export default TodoList;