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>，则当您单击该<form>时，将触发该表单的提交操作。

因此，您应该为按钮提供type属性。 <button>

type="button"

Answer 2

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

setState更新值，但显示旧值

2 个答案: