0

我有一个包含输入的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

我真的不明白我做错了什么，我觉得与生命周期方法有某种关系。任何答案都会有所帮助。谢谢你。

4

1 回答 1

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} />
于 2020-06-27T20:23:19.663 回答