我是一名年轻的开发人员，正在尝试学习一些知识Reactjs，但我无法理解如何配置此 Todo 应用程序。我的目标是有一个按钮，一旦输入并提交，就会将项目添加到列表中。我觉得我已经很接近弄清楚了。我有一个应用程序组件（父级）、按钮组件和一个列表组件（也是标题和项目组件）。该列表有一个变量，其中有一个空数组供我添加项目，我在我的应用程序组件中引用了该变量。问题就在这里。我的按钮上有一个事件监听器，它运行一个设置状态的函数。每次单击时我都会记录该列表，这表明该数组正在接收文本输入并创建一个新对象。然而，DOM 并没有重新渲染，更让我困惑的是，当我进行轻微编辑（随机分号）时，DOM 渲染了我上次保存之前输入和记录的项目，但仍然没有响应。我在这里缺少什么？另外，我知道生命周期方法如componentDidMount()或componentDidUpdate()可能有用，但我不完全理解如何以及在哪里使用它们。export class Button extends Component {constructor() {    super()    this.handleClick = this.handleClick.bind(this)}handleClick() {    const text = document.getElementById('text_field');    const input = text.value;            this.setState(() => {            TodoList.push({id: (TodoList.length+1), name: input})        })    console.log(TodoList)}render() {     return (        <div>            <div className='search-container'>                <input className='search' type='text' placeholder='type something...' id='text_field'></input>            </div>            <div className='button-container'>                <button type='submit' className='button-add' onClick={this.handleClick}> New Task </button>            </div>        </div>    )}}class App extends React.Component {constructor() {    super()    this.state = {        todos: TodoList    }}render() {    const todoItems = this.state.todos.map(todo => {        console.log(todo.name, todo.id);        return <Item desc={todo.name} key={todo.id} />     })        return(        <div className='wrapper'>            <div className='card'>                <Header numTodos={this.state.todos.length}/>                <div className='todo-list'>                    {todoItems}                </div>                <Button />            </div>        </div>    )}  } 导出默认应用程序