根據數字更改反應狀態

Question

我是新來的反應者，正在嘗試根據狀態更改組件。 將狀態作為數字可以很好地工作，但是我不確定為什么我不能增加或減少它們的值

componentWillMount() {
    this.setState({
        userPrize: 1
    })
}

nextPrize() {
    this.setState(userPrize: this.state.userPrize + 1);
}

previousPrize() {
    this.setState(userPrize: this.state.userPrize - 1);
}


render() {
        switch(this.state.userPrize) {
            case 1:
                return <Prizes userPrize={this.state.userPrize} nextPrize={ this.nextPrize() } previousPrize={ this.previousPrize() } />
            case 2:
                return <Prizes userPrize={this.state.userPrize} nextPrize={ this.nextPrize() } previousPrize={ this.previousPrize() } />
            case 3:
                return <Prizes userPrize={this.state.userPrize} nextPrize={ this.nextPrize() } previousPrize={ this.previousPrize() } />
            case 4:
                return <Prizes userPrize={this.state.userPrize} nextPrize={ this.nextPrize() } previousPrize={ this.previousPrize() } />
            case 5:
                return <Prizes userPrize={this.state.userPrize} nextPrize={ this.nextPrize() } previousPrize={ this.previousPrize() } />
            default:
                throw new Error("Unknown prize state");
        }
  }

我不確定是否可以使用函數中的狀態更改狀態？ 我嘗試了幾種不同的方法，但始終遇到語法錯誤，例如next和previousPrize函數中的意外令牌。 由於我仍然習慣於做出反應，因此我也想知道這是否也是傳遞狀態以更改組件的最佳實踐方法？

Answer 1

在基於先前狀態值更新狀態時，不建議使用所有其他（到目前為止）答案。 執行此操作的“正確”方法是：

nextPrize() {
  this.setState((prevState) => ({userPrize: prevState.userPrize + 1}));
}

previousPrize() {
  this.setState((prevState) => ({userPrize: prevState.userPrize - 1}));
}

引用官方文檔 ：

第一個參數是帶有簽名的updater函數：

 (prevState, props) => stateChange 

prevState是對先前狀態的引用。 它不應該直接突變。 相反，更改應通過根據prevState和props的輸入構建一個新對象來表示。 例如，假設我們想通過props.step增加state的props.step ：

 this.setState((prevState, props) => { return {counter: prevState.counter + props.step}; }); 

---

話雖如此，這里沒有理由要使用切換用例，因為無論如何您要為1-5返回相同的值。 另外，通過執行this.nextPrize()您將調用該函數，這意味着您將更新渲染狀態，並進入無限循環。 只需將引用傳遞給該函數即可：

render() {
  if(this.state.userPrize > 5) return null;
  return <Prizes userPrize={this.state.userPrize} nextPrize={ this.nextPrize } previousPrize={ this.previousPrize } />;
  }

Answer 2

您在setState調用中缺少{} ：

setState接受一個對象：

nextPrize() {
    this.setState({ userPrize: this.state.userPrize + 1 });
}

previousPrize() {
    this.setState({ userPrize: this.state.userPrize - 1 });
}

編輯：

您的代碼中也有一些問題。 您沒有綁定作為prop傳入的函數，而是立即調用它們會導致問題。 另外，您可以將nextPrize和previousPrize合並為一個函數。 我在這里更新了它：

setPrize = (amt) => {
    this.setState( prevState => ({ userPrize: prevState.userPrize + amt }) );
}

render() {
    switch(this.state.userPrize) {
        case 1:
            return <Prizes userPrize={this.state.userPrize} nextPrize={ this.setPrize.bind(this, 1) } previousPrize={ this.setPrize.bind(this, -1) } />
        case 2:
            return <Prizes userPrize={this.state.userPrize} nextPrize={ this.setPrize.bind(this, 1) } previousPrize={ this.setPrize.bind(this, -1) } />
        case 3:
            return <Prizes userPrize={this.state.userPrize} nextPrize={ this.setPrize.bind(this, 1) } previousPrize={ this.setPrize.bind(this, -1) } />
        case 4:
            return <Prizes userPrize={this.state.userPrize} nextPrize={ this.setPrize.bind(this, 1) } previousPrize={ this.setPrize.bind(this, -1) } />
        case 5:
            return <Prizes userPrize={this.state.userPrize} nextPrize={ this.setPrize.bind(this, 1) } previousPrize={ this.setPrize.bind(this, -1) } />
        default:
            throw new Error("Unknown prize state");
    }
}

Answer 3

試試這個

componentWillMount() {
    this.setState({
        userPrize: 1
    })
}

nextPrize = () => {
    this.setState({userPrize: this.state.userPrize + 1});
}

previousPrize = () => {
    this.setState({userPrize: this.state.userPrize - 1});
}


render() {
        switch(this.state.userPrize) {
            case 1:
                return <Prizes userPrize={this.state.userPrize} nextPrize={ this.nextPrize } previousPrize={ this.previousPrize } />
            case 2:
                return <Prizes userPrize={this.state.userPrize} nextPrize={ this.nextPrize } previousPrize={ this.previousPrize } />
            case 3:
                return <Prizes userPrize={this.state.userPrize} nextPrize={ this.nextPrize } previousPrize={ this.previousPrize } />
            case 4:
                return <Prizes userPrize={this.state.userPrize} nextPrize={ this.nextPrize} previousPrize={ this.previousPrize } />
            case 5:
                return <Prizes userPrize={this.state.userPrize} nextPrize={ this.nextPrize } previousPrize={ this.previousPrize } />
            default:
                throw new Error("Unknown prize state");
        }
  }

Answer 4

設置狀態為一個對象：

this.setState({
  userPrize: this.state.userPrize + 1
});

Answer 5

您必須聲明沒有括號的函數：

<Prizes userPrize={this.state.userPrize} nextPrize={ this.nextPrize } previousPrize={ this.previousPrize } />

同樣， this關鍵字必須綁定到您的函數，以這種方式編寫函數（它將自動可用）：

nextPrize = () => {
    this.setState((prevState) => ({userPrize: prevState.userPrize - 1}));
}

還要看看setState和prevState語法。