Блог

Я пытаюсь сохранить значения <from> моего хранилища сеансов, чтобы, если пользователь перейдет на другую страницу веб-сайта, например, нажав на ссылку, чтобы создать нового «Автора», когда пользователь вернется к <from> все значения все еще там.

Но если я нажму на ссылку после ввода некоторых значений <TextField> , все последние значения каждого поля будут отсутствовать, когда я вернусь в свою форму.

напр.. Я пишу hello на своем вводе, если я обновлю, у меня есть hell

Надеюсь, все ясно, и кто-нибудь сможет просветить меня о том, чего мне не хватает, это было бы здорово. Ниже приводится выдержка из моего кода.

 const initialValues = {
  title: '',
  //... and other stuff
}

export default function BookForm() {

  const [values, setValues] = useState(initialValues);

  const handleChange = (event) => {
    if (event.target.value) {
      setValues({...values, [event.target.name]: event.target.value})
      sessionStorage.setItem('values', JSON.stringify(values))
    }
    else {
      setValues({...values, [prop]: initialValues[prop]})
      sessionStorage.setItem('values', JSON.stringify(values))
    }
  };

  useEffect(() => {
    if(!isLoaded) {
      loadAutocomplete()
    }
    if (sessionStorage.getItem('values')){
      setValues(JSON.parse(sessionStorage.getItem('values')))
    }
  }, [isLoaded])

}

return (
    <form className={classes.root} onSubmit={sendForm}>
      <Grid container>
        <Grid item xs={12}>

          {/*TITRE OK*/}
          <LineForm>
            <TextField
              fullWidth
              name={"title"}
              id="book-title"
              label="TITRE"
              required
              value={values.title}
              onChange={handleChange}
              InputLabelProps={{
                shrink: true,
              }}
            />
          </LineForm>

// ...


 

Редактировать:

 let formValues = {...values, [event.target.name]: event.target.value}
    if (event.target.value) {
      setValues(formValues)
      sessionStorage.setItem('values', JSON.stringify(formValues))
    }
 

кажется, это работает

Ваша проблема setState в том, что при выполнении функции значения состояния не обновляются немедленно, в вашем случае, когда вы это делаете:

       setValues({...values, [event.target.name]: event.target.value})
      sessionStorage.setItem('values', JSON.stringify(values))
 

вы задаете переменную в хранилище сеансов values , но она не является самой обновленной.

Просто сохраните значение, на которое вы отправляете setValues , и используйте его для обновления хранилища сеансов.

Редактировать:

как бы это выглядело:

  const handleChange = (event) => {
    if (event.target.value) {
      const newValues = {...values, [event.target.name]: event.target.value};

      setValues(newValues)
      sessionStorage.setItem('values', JSON.stringify(newValues))
    }
    else {
      setValues({...values, [prop]: initialValues[prop]})
      sessionStorage.setItem('values', JSON.stringify(values))
    }
  };