我有一個(gè)包含輸入的App組件。每次我輸入輸入時(shí)，輸入的值都會更新，并且消息組件會根據(jù)輸入的長度打印不同的消息。同時(shí)，名為Character的第三個(gè)組件將字符串的每個(gè)字母單獨(dú)打印到屏幕上。期望的行為是，當(dāng)我單擊其中一個(gè)字母時(shí)，它會從字符串中刪除，新字符串會顯示在屏幕上，并且輸入也會使用新字符串進(jìn)行更新。我使用了一些 console.logs 進(jìn)行調(diào)試，一切似乎都按預(yù)期進(jìn)行，直到我嘗試更新狀態(tài)的最后一步，但由于某種原因，它沒有得到更新。class App extends React.Component {  constructor(props) {    super(props);    this.state = { text: "" };  }  render() {    const handleUpdateText = event => {      this.setState({        text: event.target.value      });    };    const inputLength = this.state.text.length;    const toArray = this.state.text.split("");    const handleDeleteLetter = index => {      toArray.splice(index, 1);      console.log(toArray);      const updatedArray = toArray.join("");      console.log(updatedArray);      this.setState({ text: updatedArray });      console.log(this.state.text);    };    return (      <>        <input type="text" onChange={handleUpdateText} />        <Message inputLength={inputLength} />        {toArray.map((letter, index) => (          <Character            key={index}            theLetter={letter}            deleteLetter={() => handleDeleteLetter(index)}          />        ))}      </>    );  }}class Message extends React.Component {  render() {    const { inputLength } = this.props;    let codeToPrint = "The text is long enough!";    if (inputLength <= 5) {      codeToPrint = "The text is not long enough!";    }    return <p>{codeToPrint}</p>;  }}class Character extends React.Component {  render() {    const { theLetter, deleteLetter } = this.props;    return (      <div        style={{          display: "inline-block",          padding: "16px",          textAlign: "center",          margin: "16px",          backgroundColor: "tomato"        }}        onClick={deleteLetter}      >        {theLetter}      </div>    );  }}完整的代碼在這里：https://codesandbox.io/s/react-the-complete-guide-assignment-2-list-conditionals-e6ty6?file=/src/App.js:51-1007我真的不明白我做錯(cuò)了什么，我覺得與生命周期方法有某種關(guān)系。任何答案都會有所幫助。謝謝你。