我正在嘗試完成一項挑戰，這些是最后的步驟：5 -> 渲染一個 CharComponents 列表，其中每個 CharComponent 接收輸入文本的不同字母（在初始輸入字段中）作為道具。6 -> 當您單擊一個 CharComponent 時，它應該從輸入的文本中刪除。第 5 步運行良好，但我不明白為什么沒有呈現更新的 textList。應用程序.js：import React, { Component } from "react";import "./App.css";import Validation from "./ValidationComponent";import Char from "./CharComponent";class App extends Component {state = {    text: "",    length: 0,};textHandler = (e) => {    const text = e.target.value;    const length = text.length;    this.setState({ text: text, length: length });};deleteCharHandler = (index) => {    const text = this.state.text.split("");    text.slice(index, 1);    const updatedText = text.join("");    this.setState({ text: updatedText });};render() {    const textList = this.state.text.split("").map((char, index) => {    return (        <Char        letter={char}        key={index}        click={() => this.deleteCharHandler(index)}        />    );    });    return (    <div className="App">        <input type="text" onChange={this.textHandler} />        <p>{this.state.length}</p>        <Validation length={this.state.length} />        {textList}    </div>    );}}export default App;字符組件：import React from "react";import "./styles.css";const charComponent = (props) => {return (    <div className="Char">    <p onClick={props.click}>{props.letter}</p>    </div>);};export default charComponent;驗證組件：import React from "react";import "./styles.css";const validationComponent = (props) => {let message = "";if (props.length < 5 && props.length !== 0) message = "Text is too short!!!";if (props.length > 18) message = "Text is long enough!!!";return (    <div>    <p>{message}</p>    </div>);};export default validationComponent;