#reactjs #react-hooks
Вопрос:
Я хочу обновить состояние, зависящее от другого изменения состояния. Например, у меня есть первое состояние, и если первое состояние изменится, я хочу изменить второе состояние в зависимости от изменений первого состояния. Каков наилучший способ сделать это? Я подготовил два примера.
Пример 1
Здесь я изменяю состояние 2 внутри обратного вызова изменения состояния состояния 1.
const DependentStateExample1 = () => {
const [state1, setState1] = useState(0);
const [state2, setState2] = useState(0);
const changeState1 = () => {
setState1((prev) => {
const newState = prev 5;
setState2((prevState2) => prevState2 newState);
return newState;
});
};
return (
<div>
<span>{state1}</span><span>{state2}</span>
<button onClick={changeState1}>Change State 1</button>
</div>
);
};
Пример 2
Здесь я использую useEffect, который будет выполняться каждый раз при изменении состояния 1.
const DependentStateExample2 = () => {
const [state1, setState1] = useState(0);
const [state2, setState2] = useState(0);
const changeState1 = () => {
setState1((prev) => prev 5);
};
useEffect(() => setState2((prev) => prev state1), [state1]);
return (
<div>
<span>{state1}</span>
<span>{state2}</span>
<button onClick={changeState1}>Change State 1</button>
</div>
);
};
Оба способа дают мне один и тот же результат, но какой из них лучше, или есть лучший способ решить эту проблему? Может кто-нибудь, пожалуйста, объяснить?
Комментарии:
1. Существует ли какое-либо конкретное требование использовать 2 разных состояния? Почему нельзя использовать в одном штате?
2. Нет, нет никакой особой причины для использования 2 разных состояний. Использовать одно состояние на самом деле хорошая идея, тогда я могу использовать useReducer вместо useState. Но в любом случае, все еще возможно ли это сделать с 1 состоянием в каждом?
3. Есть какие-нибудь новости по этому поводу?
Ответ №1:
Давайте начнем с того факта, что вы знаете связь между первым состоянием и вторым, поэтому вместо того, чтобы записывать эту логическую зависимость в коде, вы могли бы убрать ее и просто написать код так, чтобы он давал тот же результат, но чтобы React не приходилось «ждать», пока setState завершится:
setState1(oldState1 => oldState1 5);
setState2(oldState2 => oldState1 oldState2 5); // we know setState is async so remember on the second line you don't have yet setState1 completed
Этот принцип можно было бы распространить на более сложные зависимости между государствами.