为什么我的 updatedText 组件没有被渲染？

Question

我正在尝试完成一项挑战，这些是最后的步骤：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;

Answer 1

在deleteCharHandler中，您正在使用slice而不是splice。