reactjs - 为什么这个 React Switch Case 不起作用？

问题描述

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

我的应用程序的初始状态我想在单击“继续”按钮时更新 topicTitle、topicContent 和级别的状态。它应该通过调用函数NextTopic并在其中递增let level来实现。然后设置this.state.level为递增变量的值level。之后，switch case 应该检查的值，this.state.level如果它等于 1，则更新 topicName 和 topicContent 的状态。这是我的代码运行时实际发生的情况

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

标签： reactjs

您尚未level在NextTopic. level您可以直接在 1 中递增setState：

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

reactjs - 为什么这个 React Switch Case 不起作用？

问题描述

解决方案

推荐阅读