我正在嘗試將添加的待辦事項返回到我創建的列表中。我已經使用材料 ui 庫來創建列表。我能夠將新添加的待辦事項返回到列表中，但它會再次生成整個數組，而不僅僅是添加的特定值。我已經添加了我在 app.js 中使用的代碼，listlayout.js 是呈現新添加的待辦事項的頁面。表單還有另一個組件，我沒有添加該代碼，因為它對于這個特定問題并不重要應用程序.jsclass App extends Component {  constructor(props) {    super(props);    this.state = {      items: [],      newItem: {        id: "",        itemText: ""      }    };    this.handleInput = this.handleInput.bind(this);    this.addItem = this.addItem.bind(this);  }  handleInput = e => {    this.setState({      newItem: {        id: 1 + Math.random(),        itemText: e.target.value      }    });  };  addItem = e => {    e.preventDefault();    const typedItem = this.state.newItem;    if (typedItem.text !== "") {      const typedItems = [...this.state.items, typedItem];      this.setState({        items: typedItems,        newItem: {          id: "",          items: ""        }      });    }  };  render() {    return (      <div>        <HeaderBar />        <InputForm          newItem={this.state.newItem.itemText}          addItem={this.addItem}          handleInput={this.handleInput}        />        <ListLayout items={this.state.items} />      </div>    );  }}export default App;ListLayout.jsconst ToDoList = props => {  const classes = useStyles();  const [dense] = React.useState(false);  const items = props.items;  function generate(element) {    return items.map(value =>      React.cloneElement(element, {        key: value      })    );  }  const listItems = items.map(item => {    return <div key="item.id">{item.itemText}</div>;  });