React setState() 需要点击 2 次来更新 UI

Question

我是 React 的新手。我的问题在 React 开发人员中可能很常见，并且有很多相同的问题，但我仍然不知道如何解决。我仍然必须单击两次才能更新 UI 状态。第一次点击只调用事件处理程序，但不更新状态中的计数器变量。即使我像下面这样使用 setState() 的回调形式：this.setState({ hasButtonBeenClicked: true }, () => {console.log("Clicked")});第一次点击也没有达到 console.log("Clicked") ！应用程序.jsimport React, { Component, useState } from "react";import { Summary } from "./Summary";import ReactDOM from "react-dom";let names = ["Bob", "Alice", "Dora"]function reverseNames() {    names.reverse();    ReactDOM.render(<App />, document.getElementById('root'));}function promoteName(name) {    names = [name, ...names.filter(val => val !== name)];    ReactDOM.render(<App />, document.getElementById('root'));}export default class App extends Component {    constructor(props) {        super(props);        this.state = {            counter: 0        }    }    incrementCounter = (increment) => this.setState({counter: this.state.counter + increment});    render() {        return (            <table className="table table-sm table-striped">                <thead>                    <tr><th>#</th><th>Name</th><th>Letters</th></tr>                </thead>                <tbody>                    {names.map((name, index) =>                        <tr key={name}>                            <Summary index={index} name={name}                                reverseCallback={() => reverseNames()}                                promoteCallback={() => promoteName(name)}                                counter={this.state.counter}                                incrementCallback={this.incrementCounter}                            />                        </tr>                    )}                </tbody>            </table>        )    }}

Answer 1

我通过注释掉 App.js 中的行解决了这个问题

function reverseNames() {

    names.reverse();

    // ReactDOM.render(<App />, document.getElementById('root'));

}

我认为在实际状态更新之前使应用程序重新呈现的行，所以我落后于实际状态 1 跨度。第一次点击是初始状态，第二次点击是第一次点击后的状态.etc