Блог

У меня есть этот код для проверки пароля и электронной почты:

  const [register, setRegister] = useState({
        email: '',
        password: '',
        error: '',
        validation: []
    })

    function validate (e) {
        let valid = true
    
        setRegister((register) => ({ ...register, validation: [] }))
    
        if (register.email === '') {
          setRegister((register) => ({ ...register, validation: register.validation.concat('E-mail is required') }))
          valid = false
        }
    
        if (register.password === '') {
          setRegister((register) => ({ ...register, validation: register.validation.concat('Password is required') }))
          valid = false
        }
    
        return valid
      }
 

Почему мне нужно использовать

 setRegister((register) => ({ ...register, validation: register.validation.concat('E-mail is required') }))
 

вместо

 setRegister({ ...register, validation: register.validation.concat('E-mail is required') })
 

чтобы добавить проверку электронной почты и пароля в проверку массива?

setRegister это асинхронный метод, поэтому вы не можете сразу получить обновленное значение register after setRegister . Итак, вместо того, чтобы передавать параметр непосредственно в setRegister, вам нужно передать параметр обратного вызова с prevstate .

Давайте предположим, что оба register.email и register.password пусты, поэтому мы должны настроить register для проверки электронной почты и пароля. После первого setRegister, содержащего только параметры, register не будет обновляться немедленно, поэтому второе setRegister будет основано на начальном register значении, а не на значении проверки, требуемом по электронной почте register .

Если мы используем обратный вызов с предыдущим состоянием, он основан не на register значении во время вызова setRegister , а на предыдущем register состоянии. Таким образом, в конечном итоге register будет обновлен как адрес электронной почты, так и требуемый пароль.

Обратитесь к ссылке на API Hooks