我是一名年輕的開發(fā)人員，正在嘗試學(xué)習(xí)一些知識(shí)Reactjs，但我無法理解如何配置此 Todo 應(yīng)用程序。我的目標(biāo)是有一個(gè)按鈕，一旦輸入并提交，就會(huì)將項(xiàng)目添加到列表中。我覺得我已經(jīng)很接近弄清楚了。我有一個(gè)應(yīng)用程序組件（父級(jí)）、按鈕組件和一個(gè)列表組件（也是標(biāo)題和項(xiàng)目組件）。該列表有一個(gè)變量，其中有一個(gè)空數(shù)組供我添加項(xiàng)目，我在我的應(yīng)用程序組件中引用了該變量。問題就在這里。我的按鈕上有一個(gè)事件監(jiān)聽器，它運(yùn)行一個(gè)設(shè)置狀態(tài)的函數(shù)。每次單擊時(shí)我都會(huì)記錄該列表，這表明該數(shù)組正在接收文本輸入并創(chuàng)建一個(gè)新對(duì)象。然而，DOM 并沒有重新渲染，更讓我困惑的是，當(dāng)我進(jìn)行輕微編輯（隨機(jī)分號(hào)）時(shí)，DOM 渲染了我上次保存之前輸入和記錄的項(xiàng)目，但仍然沒有響應(yīng)。我在這里缺少什么？另外，我知道生命周期方法如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>    )}  } 導(dǎo)出默認(rèn)應(yīng)用程序