React - 即使屏幕上打印的消息发生变化，class 组件中的状态也不会更新

Question

我有一个包含输入的 App 组件。每次我输入输入时，输入的值都会更新，并且 Message 组件会打印不同的消息，具体取决于输入的长度。同时，名为 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 prop 传递给输入，以便输入的值可以与您的状态同步

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

并且您在设置后看不到更新的状态，因为 setState 是异步的。这就是 setState 语句之后的 console 语句显示先前值的原因。

您还应该将函数移出渲染方法，因为每次组件重新渲染时，都会创建新函数。您可以将它们声明为 class 属性并传递它们的引用

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

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

React - 即使屏幕上打印的消息发生变化，class 组件中的状态也不会更新

React - state doesn't update in class component even though the message printed on the screen changes

javascript

components

reactjs

react-class-based-component