Блог

У меня есть реквизит состояния, который изменяется в зависимости от введенного пользователем входного значения (суммы) (назовите его firstState.a). мой вопрос в том, как изменить другой реквизит состояния (fee, secondState.b) на основе введенного значения. Я думал, что мог бы условно установить состояние secondState в useEffect, если бы firstState.a был зависимостью, которая запускает useEffect всякий раз, когда он изменяется. Чего я не понимаю.

псевдокод

 useEffect(()=>{
  if(...) {
    setSecondState(secondstate.b)
  } else { 
    setSecondState(secondstate.b)
  }
}, [firstState.a])
  

Я думаю, что это тот способ, которым вам нужно его использовать, при изменении суммы будет запущен эффект использования, и если произойдет какое-либо изменение суммы, это также обновит плату. Или вы также можете заставить его работать с onChange, установив второе состояние также при обновлении первого состояния.

 useEffect(() => {
        setFee(amount)

    }, [amount)])
  

Давайте представим, что у вас есть 2 разных состояния:

 const [stateA, setStateA] = useState('');
const [stateB, setStateB] = useState('');
  

Первый эффект, который будет запущен после монтирования, давайте запустим stateA изменение (в идеале это не так, но оставим его здесь для примера — возможно, это происходит из вызова API, это может быть вызвано, возможно, по onchange событию пользователя, например, поля ввода):

 useEffect(() => {
  setStateA('value');
}, []);
  

Второй эффект будет запущен после stateA изменений на основе массива зависимостей и его значения, которое вы можете вызвать setStateB с предпочтительным значением:

 useEffect(() => {
   if (stateA === 'value') {
      setStateB('first condition applied');
   } else {
      setStateB('second condition applied');
   }
}, [stateA]);
  

Полный пример тела функционального компонента:

 const [stateA, setStateA] = useState('');
const [stateB, setStateB] = useState('');

useEffect(() => {
  setStateA('value');
}, []);

useEffect(() => {
   if (stateA === 'value') {
      setStateB('first condition applied');
   } else {
      setStateB('second condition applied');
   }
}, [stateA]);
  

В документации есть хорошее дополнительное объяснение использования ловушки эффекта.