React中狀態更改后的渲染組件

Question

我有一個可以調用兩個功能的應用程序： MyCart和MyItems。 我試圖做到這一點，以便在調用MyItems中呈現的按鈕時，它調用主應用程序組件（父級）內部的方法並更改狀態，但由於某些原因，它不會更改MyCart跨度中的值。

我下面的代碼是我要嘗試執行的操作，但是它不起作用，我不知道為什么。

class ShopRemake extends React.Component {
    constructor() {
        super();
        this.state = {
            total: 0
        }

        this.changeTotal = this.changeTotal.bind(this);
    }

    changeTotal() {
        this.setState(prevState => {total: ++prevState.total});
        console.log(this.state);
    }

    render() {
        return (
            <React.Fragment>
                <MyItem changeTotal={this.changeTotal}/>
                <MyCart total={this.state.total}/>
            </React.Fragment>
        );
    }
}

function MyItem(props) {
    return (
        <button onClick={props.changeTotal}> Click Me </button>
    );
}

function MyCart(props) {
    return (
        <span> Total Items: {props.total} </span>
    );
}

我想要它，以便在單擊按鈕后MyCart內的跨度相應地更新。

Answer 1

您必須將返回的對象文字包裝在箭頭函數中的括號內。 否則，花括號將被視為表示功能的主體。 以下作品：

p => ({ foo: 'bar' })

因此，在changeTotal調用setState ：

changeTotal() {
    this.setState(prevState => {total: ++prevState.total});
    console.log(this.state);
}

應替換為以下內容：

changeTotal() {
    this.setState(prevState => ({total: ++prevState.total}));
    console.log(this.state);
}

同樣， setState是異步的，您將需要等待它（不推薦）或使用回調作為第二個參數來查看結果狀態：

changeTotal() {
    this.setState(
        prevState => ({total: ++prevState.total}),
        () => { console.log(this.state) }
    );
}

---

編輯：

旁注，可以將代碼中下面的2個組件簡化為箭頭函數，以得到完全相同的結果，同時使它們更易於閱讀：

const MyItem = ({ changeTotal }) => <button onClick={changeTotal}> Click Me </button>

const MyCart = ({ total }) => <span> Total Items: {total} </span>

您還可以將changeTotal轉換為箭頭函數，以避免必須將其綁定到構造函數中

Answer 2

您的setState不在此處返回對象。 嘗試將您的方法changeTotal更改為此

changeTotal() {
     this.setState(prevState => ({ total: prevState.total + 1 }), () => 
     console.log(this.state));
}

setState方法是異步的，如果要記錄其值，請使用回調進行此操作。