Реагировать - состояние не обновляется в компоненте класса, даже если сообщение, выводимое на экран, изменяется

Question

У меня есть компонент приложения, который содержит ввод. Каждый раз, когда я ввожу ввод, значение ввода обновляется, и компонент сообщения печатает другое сообщение в зависимости от того, как долго вводится. В то же время, третий компонент под названием Character печать на экране каждую букву строки, в индивидуальном порядке. Желаемое поведение состоит в том, что когда я нажимаю на одну из букв, она удаляется из строки, новая строка отображается на экране, и ввод также обновляется с новой строкой.

Я использовал несколько console.logs для отладки, и все, кажется, происходит так, как ожидалось, до последнего шага, когда я пытаюсь обновить состояние, но по какой-то причине оно не обновляется.

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

Я действительно не понимаю, что делаю не так, и у меня есть ощущение, что это каким-то образом связано с методом жизненного цикла. Любой ответ может помочь. Спасибо.

Answer 1

Состояние обновляется, вам просто нужно пройти value поддерживайте вход, чтобы значение входа могло быть синхронизировано с вашим состоянием

<input type="text" value={this.state.text} onChange={handleUpdateText} />

И вы не видите обновленное состояние сразу после его установки, потому что setStateасинхронный. Вот почемуconsole заявление сразу после setState оператор показывает предыдущее значение.

Также вы должны переместить функции из вашего метода рендеринга, потому что каждый раз, когда ваш компонент повторно рендерит, будут создаваться новые функции. Вы можете объявить их как свойства класса и передать их ссылку

   handleUpdateText = event => {
      this.setState({
        text: event.target.value
      });
    };

render() {
.......
 return (
      <>
        <input type="text" onChange={this.handleUpdateText} />