Обратный вызов в setState
У меня есть компонент, в котором eslint предлагает: «Использовать обратный вызов в setState при ссылке на предыдущее состояние». Подскажите, как мне переписать код для обновления состояния компонента в setState?
Я пытался передать функцию вторым аргументом в setState, но получаю ошибку и не знаю, правильный ли это подход.
Состояние:
constructor(props) {
super(props);
this.state = {
minutes: '24',
seconds: '59',
disabled: false,
};
}
componentDidMount и setState:
componentDidMount() {
const prevMinutes = localStorage.getItem('minutes');
const prevSeconds = localStorage.getItem('seconds');
this.setState({
minutes: +prevMinutes !== 0 ? +prevMinutes : this.state.minutes, // warning here
seconds: +prevSeconds !== 0 ? +prevSeconds : this.state.seconds, // and here
});
}
Теперь код работает правильно, это логично, но хотелось бы понять правильный подход при создании таких структур.
P.S. Про деструктуризацию знаю, сделаю это после того, как пойму, зачем нужно делать callback и как правильно это сделать.
На самом деле вы должны использовать второй метод использования setstate, то есть отправив функцию, которая получает предыдущее состояние в качестве параметра, и использовать этот объект вместо прямой ссылки на this.state
@jonrsharpe спасибо за ссылку! Через VS Code не открылось :)
@KrishnaPrashatt спасибо за объяснение, теперь все намного яснее
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
это не второй аргумент, это все еще первый аргумент (называемый средством обновления), но вы заменяете объект функцией следующим образом:
this.setState(prev => ({
minutes: +prevMinutes !== 0 ? +prevMinutes : prev.minutes,
seconds: +prevSeconds !== 0 ? +prevSeconds : prev.seconds,
}));
согласно с: https://reactjs.org/docs/react-component.html#setstate
второй аргумент - это просто обратный вызов, который вызывается после изменения состояния.
setState((oldState) => changes). Ознакомьтесь с рекомендациями в документации по правилам: github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/….