Question

我是新手，我正在尝试根据状态更改我的组件。将状态作为数字运行完美，但我不确定为什么我无法增加或减少其值？

$(document).ready(function() {
  function Inner(){
    var self = this;
    self.message = ko.observable("");
    self.text = ko.observable("begin");

    self.postData = function () {
      if (self.message().trim() !== '') {
        self.text(self.text() + "\n" + self.message())
      }
      self.message('');
    }
  }

  ko.applyBindings(new Inner());
});

我不确定你是否可以按照我的方式使用函数中的状态来改变状态？我尝试了几种不同的方法，但不断遇到语法错误，例如： next和previousPrize函数中的意外令牌。由于我仍然习惯于做出反应，我也想知道这是否是传递状态改变组件的最佳做法？

Answer 1

当根据先前的状态值更新状态时，不鼓励所有其他（到目前为止）答案。这样做的“正确”方法是：

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

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

引用official documentation：

第一个参数是带有签名的更新程序函数：
(prevState, props) => stateChange
prevState是对先前状态的引用。它不应该直接变异。相反，应根据prevState和props的输入构建新对象来表示更改。例如，假设我们想要通过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

您错过this.setState({ userPrize: this.state.userPrize + 1 });来电中的{}：

setState接受一个对象：

setState

编辑：

您的代码中也存在一些问题。你没有将你传入的函数绑定为道具，而是立即调用它们会导致问题。此外，您可以将nextPrize() { this.setState({ userPrize: this.state.userPrize + 1 }); } previousPrize() { this.setState({ userPrize: this.state.userPrize - 1 }); }和nextPrize合并为一个功能。我在这里更新了它：

previousPrize

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

设置状态需要一个对象：

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ /index.php [L]

Answer 5

你必须在没有parantheses的情况下声明你的函数：

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

此外此关键字必须绑定到您的函数，以这种方式编写您的函数（并且它将自动可用）：

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

还要查看 setState 和 prevState 语法。

根据数量改变反应状态

5 个答案: