Question

首先，我很抱歉这个基本问题，但我刚开始从官方文档中学习React。

Initial state of my app 当我点击“继续”按钮时，我想更新topicTitle，topicContent和level的状态。它应该通过调用函数NextTopic并在其中递增let level来实现。然后将this.state.level设置为递增变量level的值。之后，switch case应该检查this.state.level的值，如果它等于1，则更新topicName和topicContent的状态。 This is what my actually happens when my code runs

import React, { Component } from 'react';

export default class Sidebar extends Component {
    //default states
    constructor() {
        super();
        this.state = {
            level: 0,
            topicTitle: 'Topic Name',
            topicContent: 'Content!!'
        }
    }

    render() {
        const NextTopic = (e) => {
            //increment level
            let level;
            level++;
            //set state of level to incremented let level
            this.setState({level: level});
            
            //check level of state and update topic name- and content state    
            switch(this.state.level) {
                case 1: 
                    return this.setState({topicTitle: 'new Topic Name', topicContent: 'new    Content!!'});
            }       
        }
        
        //Sidebar Component
        return (
            <div>
                <h1>{this.state.topicTitle}</h1>
                <p>{this.state.topicContent}</p>
                <h2>Level: {this.state.level}</h2>
                <button id='next' onClick={NextTopic}>Continue</button>
            </div>
        )
    }
};

Answer 1

在执行switch-case时，setState不一定会更改您所在州的level属性。 React批处理各种setState调用，然后每约16.67ms调用一次。你可以做两件事 -

使用您在NextTopic方法中创建的关卡变量（另外，您如何递增未定义的变量？

让level = this.state.level ++级 this.setState（{level：level}）

开关（电平）{ 案例1：//你的代码 }
将回调函数内部的switch-case包装到setState中，一旦状态实际通过react更改，就会调用它 -

让level = this.state.level ++级 this.setState（{level}，（）=＆gt; { switch（this.state.level）{ 案例1：//你的代码 }）

Answer 2

您尚未在level中将NextTopic设置为0。您可以直接在level中将setState增加1：

this.setState((prevState, props) => ({
  level: prevState.level + 1
}));

为什么这个React Switch Case无法正常工作？

2 个答案: