我是 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>        )    }}