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

Question

我有一个包含输入的App组件。每次我输入输入时，输入的值都会更新，并且消息组件会根据输入的长度打印不同的消息。同时，名为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

状态正在更新，您只需将valueprop 传递给输入，以便输入的值可以与您的状态同步

<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} />