第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React setState() 需要點擊 2 次來更新 UI

React setState() 需要點擊 2 次來更新 UI

藍山帝景 2023-05-11 14:45:51
我是 React 的新手。我的問題在 React 開發(fā)人員中可能很常見,并且有很多相同的問題,但我仍然不知道如何解決。我仍然必須單擊兩次才能更新 UI 狀態(tài)。第一次點擊只調(diào)用事件處理程序,但不更新狀態(tài)中的計數(shù)器變量。即使我像下面這樣使用 setState() 的回調(diào)形式:this.setState({ hasButtonBeenClicked: true }, () => {console.log("Clicked")});第一次點擊也沒有達到 console.log("Clicked") !應(yīng)用程序.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>        )    }}
查看完整描述

1 回答

?
MM們

TA貢獻1886條經(jīng)驗 獲得超2個贊

我通過注釋掉 App.js 中的行解決了這個問題


function reverseNames() {

    names.reverse();

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

}

我認為在實際狀態(tài)更新之前使應(yīng)用程序重新呈現(xiàn)的行,所以我落后于實際狀態(tài) 1 跨度。第一次點擊是初始狀態(tài),第二次點擊是第一次點擊后的狀態(tài).etc


查看完整回答
反對 回復(fù) 2023-05-11
  • 1 回答
  • 0 關(guān)注
  • 211 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號