Почему этот чехол React Switch не работает?
Прежде всего, извините за такой базовый вопрос, но я только начал изучать React из его официальной документации.
Исходное состояние моего приложения
Я хочу обновить состояние заголовка темы, содержимого темы и уровня, когда я нажимаю кнопку «Продолжить». Это должно быть сделано путем вызова функции NextTopic и увеличения в ней let level. Затем установите this.state.level на значение переменной level с приращением. После этого случай переключения должен проверить значение 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>
)
}
};да, и это моя ошибка, спасибо! =] @JoelHarkes
Ответы 2
setState не обязательно изменяет свойство level в вашем состоянии к моменту выполнения вашего switch-case. React пакетирует различные вызовы setState, а затем вызывает его примерно раз в 16,67 мс. Вы можете сделать две вещи -
Используйте переменную уровня, созданную вами внутри метода NextTopic (также, как вы увеличиваете неопределенную переменную?
пусть уровень = this.state.level уровень ++ this.setState ({level: level})
switch (level) { case 1: // ваш код }
Оберните switch-case внутри функции обратного вызова для setState, которая вызывается после фактического изменения состояния с помощью реакции -
пусть уровень = this.state.level уровень ++ this.setState ({level}, () => { switch (this.state.level) { case 1: // ваш код })
Дополнительно вы можете прочитать это для дальнейшего понимания того, когда происходит setState
Как вы сказали в пункте 1, я даже не определил эту переменную, и это была моя ошибка. Спасибо, что прояснили это!
@kugtas Спасибо, посмотрю =]
Вы не установили level на 0 в NextTopic. Вы можете увеличить level на 1 непосредственно в setState:
this.setState((prevState, props) => ({
level: prevState.level + 1
}));
вам не хватает
level = this.state.levelнепосредственно передlevel++;