setState 更新值但显示旧值

Question

这只是显示一个初始字符串。然后，当单击按钮时，它会更改字符串。

但在运行时，它会显示初始字符串。然后，当单击按钮时，您可以看到字符串在一瞬间发生了变化。 （新值的控制台日志也会被触发 - 并且有效）。但是，然后旧字符串再次显示。

如果对状态进行了更改，为什么它会恢复？

这是显示字符串的代码：

// Display.js
import React from 'react';

class Display extends React.Component {
    constructor(props) {
        super(props);
         this.state = {
            blogPosts: "The Bingham Blog"
        };
        this.clickHandler=this.clickHandler.bind(this);
    }

    clickHandler() {
        this.setState({
            blogPosts: "Changed!!!!!!!"
        }, () => {console.log(this.state.blogPosts)});
    }
    
    render() {
        return (
            <p>
                <form>
                    <button onClick={this.clickHandler}>Add on</button>
                </form>
                {this.state.blogPosts}
            </p>
        );
    }
}

export default Display;

这里是调用<Display />组件的App.js文件：

import React from 'react';
import Display from "./Display";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Enter text for the blog</h1>
      </header>
    <div className="display">
        <Display />
      </div>
    </div>
  );
}

export default App;

我已经为此苦苦挣扎了好几天。 我知道这很可能是 setState 的异步特性，但我不知道如何解决。

Answer 1

原因是如果您在<form> 中有一个<button>，当您单击该<button> 时，它将触发该表单的提交操作。

因此，您应该为按钮提供类型属性。 type="button"

<button type="button" onClick={this.clickHandler}>Add on</button>

Answer 2

因为您的按钮位于 <form> 标记内。默认情况下，单击按钮时，表单将提交，并且会重新加载浏览器选项卡。这就是您的状态恢复到初始状态的原因。尝试将您的按钮移出该表单。它应该可以工作。