我是一名年輕的開發人員，正在嘗試學習一些知識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>    )}  } 導出默認應用程序