Кнопки «Далее» и «Предыдущий» не работают должным образом
Я создаю приложение для реагирования, которое отображает различные компоненты сети при нажатии кнопок «Далее» и «Назад». Проблема, с которой я столкнулся, заключается в том, что обе эти кнопки реагируют на предыдущее нажатие кнопки. Типа если сначала нажать дальше то ничего не произойдет. Если затем я нажму назад, то он реагирует на предыдущее нажатие кнопки следующего.
class Card extends Component {
constructor()
{
super();
this.state = {
button:"",
i:0
}
}
onClick = (event)=>{
this.setState({button: event.target.id})
if (this.state.button== = "1")
{
this.setState({ i: this.state.i + 1 });
}
else if (this.state.button== = "2")
{
this.setState({ i: this.state.i - 1 });
}
console.info(this.state.i)
}
render() {
return(
<div className = "App">
<div >
<NavBar onButtonClick = {this.onClick}/>
<CardList i = {this.state.i} />
</div>
</div>
);
}
}
export default Card;
Ответы 2
this.setState требуется немного времени, чтобы обновить все состояние, поэтому вы не можете надежно выполнить this.setState({button: event.target.id}), а затем сразу после этого проверить this.state.button — вероятно, состояние еще не закончилось.
Вместо этого я бы рекомендовал установить условное выражение на основе event.target.id, например:
if (event.target.id === "1") {
this.setState({ i: this.state.i + 1 });
} else if (event.target.id === "2") {
this.setState({ i: this.state.i - 1 });
}
Я бы подождал, пока верхняя часть вашего render метода console.info вашего состояния для целей отладки, так как к тому времени он будет обновлен.
Для получения дополнительной информации о том, как правильно использовать setState, вы можете увидеть этот статья, особенно раздел, озаглавленный «Обновления состояния могут быть асинхронными».
setState в React пакетируется React, по сути это означает, что если вы делаете 3 вызова set state один за другим, все они вызываются последовательно.
Я рекомендую прочитать официальные документы для более подробной информации.
Теперь о вашей проблеме: вы устанавливаете состояние на основе «предыдущего значения» в этом состоянии:
this.setState({ i: this.state.i - 1 });
Это приведет к «неожиданному» поведению из-за пакетного режима, поскольку this.state.i мог измениться во время его фактического вызова.
Вот что рекомендуют делать документы React:
setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback))
Существует вторая сигнатура для метода setState, который принимает функция с сигнатурой: (state, props) => stateChange, где props является необязательным, если вы не хотите его использовать, не нужно его передавать.
Распространенная ошибка, которую вы, кажется, делаете, это чтение this.state после звонка this.setState, это не сработает.
Приведенный ниже код не идеален, но, надеюсь, показывает, что вам нужно исправить.
onClick = (event)=>{
var buttonId = event.target.id;
if (buttonId== = "1")
{
this.setState((state) => {
return { i: state.i + 1, button: 1 }
});
}
else if (buttonId== = "2")
{
this.setState((state) => {
return { i: state.i - 1, button: 2 }
});
}
}
Дополнительное чтение: Если вам все еще нужно понять, как использовать функции в setState, могу порекомендовать эту статью: https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b