ПЕРЕДАЧА и ПОЛУЧЕНИЕ данных в переадресации — Реагирующие перехваты

#reactjs

#reactjs

Вопрос:

После поиска в Google! Я не нашел никакого решения, пожалуйста, помогите!

У меня есть компонент с формой предварительной регистрации, который собирает электронную почту и ПАРОЛЬ, как показано ниже.

Я хочу передать адрес электронной почты и пароль для полной регистрации из другого компонента с перенаправлением

Сценарий :

  1. Заполните поля электронной почты и пароля
  2. нажмите btn Save => затем перенаправить на компонент / fullsignup
  3. Как я могу получить значение электронной почты и пароля в Fullsignup из компонента предварительной регистрации?
 // presignup.js
const PreSignup = props => {

const [infos, setInfos] = useState({
    email : '',
    password : '',
    isFilled : false
})
...
const handleChange = event => {
    event.preventDefault();
    const name = event.target.name;
    const values = event.target.value;
    setInfos({...infos, [name] : values})
}
const saveAndNext = event => {
    event.preventDefault();
    const presave = {
        email : infos.email,
        password : infos.password
    }
    setInfos({isFilled : true})
}
const {isFilled} = infos
if (isFilled) {
    return (
        <Redirect to={{
            pathname :'/fill/3/profile/',
            state : {infos || // anything you suggest}
            }}/>
    )
}
...

// fullsignup.js
const FullSignup = () => {
const [values, setValues] = useState({
    email : // this is fill from Presignup
    password : // this is fill from Presignup
  name : ''
// ...others 
})
// here i can use email and password without demanding new email and password!
//example
console.log(values.email, values.password) // return the values filled in Presignup component
return (
...
)
}

 

Комментарии:

1. Используете ли вы контекст или Redux для управления состоянием? Это ситуация, когда ваше приложение становится довольно сложным, и вам может потребоваться пересмотреть управление состоянием.

2. Нет, я не использую — useContext может это исправить? Раньше я не использовал контекст или Redux

Ответ №1:

Как я вижу из вашего кода, вы уже выполнили переход на страницу fullsignup с информацией о пользователе. Единственное, что вам нужно сделать, чтобы получить эти данные со страницы fullsignup. Когда вам нужны эти данные, вы можете получить их с помощью props.location.state.infos

Комментарии:

1. Спасибо @Murat Celik ! это работает, мне нужно добавить распространение для информации раньше isFilled : true в saveAndNext следующим образом : setInfos({...infos, isFilled : true})