Fatal编程技术网
  • javascript/
  • Javascript 基于数字更改反应状态

Javascript 基于数字更改反应状态

javascript reactjs ecmascript-6

Javascript 基于数字更改反应状态,javascript,reactjs,ecmascript-6,Javascript,Reactjs,Ecmascript 6,我是新的反应，并试图改变我的组件的基础上的状态。把州作为一个数字是完美的，但我不确定为什么我不能增加或减少它们的值 componentWillMount() { this.setState({ userPrize: 1 }) } nextPrize() { this.setState(userPrize: this.state.userPrize + 1); } previousPrize() { this.setState(userPrize

我是新的反应，并试图改变我的组件的基础上的状态。把州作为一个数字是完美的，但我不确定为什么我不能增加或减少它们的值

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");
        }
  }

componentWillMount（）{
这是我的国家({
用户奖：1
})
}
nextPrize（）{
this.setState（userPrize:this.state.userPrize+1）；
}
上一个奖项（）{
this.setState（userPrize:this.state.userPrize-1）；
}
render（）{
开关（this.state.userPrize）{
案例1：
返回
案例2：
返回
案例3：
返回
案例4：
返回
案例5：
返回
违约：
抛出新错误（“未知奖品状态”）；
}
}
我不确定您是否可以使用函数中的状态来更改状态，就像我所做的那样？我尝试了几种不同的方法，但不断出现语法错误，例如，在next和previousPrize函数中出现意外的标记。由于我仍然习惯于做出反应，我还想知道这是否也是传递状态以更改组件的最佳实践方法

设置状态获取一个对象：

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

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

previousPrize() {
    this.setState({ userPrize: this.state.userPrize - 1 });
}
设置一个对象的状态：

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

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

previousPrize() {
    this.setState({ userPrize: this.state.userPrize - 1 });
}
您在
setState
调用中缺少
{}
：

setState
接受对象：

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

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

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

您的代码中也有一些问题。您没有绑定作为道具传递的函数，而是立即调用它们，这将导致问题。此外，您还可以将
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");
    }
}

setPrize=（金额）=>{
this.setState（prevState=>（{userPrize:prevState.userPrize+amt}））；
}
render（）{
开关（this.state.userPrize）{
案例1：
返回
案例2：
返回
案例3：
返回
案例4：
返回
案例5：
返回
违约：
抛出新错误（“未知奖品状态”）；
}
}
您在
设置状态
调用中缺少
{}
：

setState
接受对象：

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

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

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

您的代码中也有一些问题。您没有绑定作为道具传递的函数，而是立即调用它们，这将导致问题。此外，您还可以将
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");
    }
}

setPrize=（金额）=>{
this.setState（prevState=>（{userPrize:prevState.userPrize+amt}））；
}
render（）{
开关（this.state.userPrize）{
案例1：
返回
案例2：
返回
案例3：
返回
案例4：
返回
案例5：
返回
违约：
抛出新错误（“未知奖品状态”）；
}
}
试试这种方法

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");
        }
  }

componentWillMount（）{
这是我的国家({
用户奖：1
})
}
nextPrize=（）=>{
this.setState（{userPrize:this.state.userPrize+1}）；
}
上一个奖项=（）=>{
this.setState（{userPrize:this.state.userPrize-1}）；
}
render（）{
开关（this.state.userPrize）{
案例1：
返回
案例2：
返回
案例3：
返回
案例4：
返回
案例5：
返回
违约：
抛出新错误（“未知奖品状态”）；
}
}
试试这种方法

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");
        }
  }

componentWillMount（）{
这是我的国家({
用户奖：1
})
}
nextPrize=（）=>{
this.setState（{userPrize:this.state.userPrize+1}）；
}
上一个奖项=（）=>{
this.setState（{userPrize:this.state.userPrize-1}）；
}
render（）{
开关（this.state.userPrize）{
案例1：
返回
案例2：
返回
案例3：
返回
案例4：
返回
案例5：
返回
违约：
抛出新错误（“未知奖品状态”）；
}
}
根据以前的状态值更新状态时，不鼓励所有其他（目前为止）答案。“正确”的做法是：

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

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

第一个参数是具有签名的更新程序函数：

(prevState, props) => stateChange

prevState
是对先前状态的引用。它不应该直接变异。相反，应该通过基于
prevState
和
props
的输入构建新对象来表示更改。例如，假设我们想通过
props在state中增加一个值


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




也就是说，您没有理由在这里使用switch case，因为对于值1-5，您将返回相同的内容。另外，通过执行
this.nextPrize（）
您正在对该函数进行调用，这意味着您将在渲染时更新状态，并将进入一个无休止的循环。只需将引用传递给该函数：


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



render（）{
如果（this.state.userPrize>5）返回null；
返回；
}

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


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

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


引述:

第一个参数是具有签名的更新程序函数：


(prevState, props) => stateChange



prevState
是对先前状态的引用。它不应该直接变异。相反，应该通过基于
prevState
和
props
的输入构建新对象来表示更改。例如，假设我们想通过
props在state中增加一个值


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




也就是说，您没有理由在这里使用switch case，因为对于值1-5，您将返回相同的内容。另外，通过执行
this.next