React hook useState не обновляется с помощью onSubmit
В настоящее время у меня возникает проблема с переводом значения поля ввода в состояние onSubmit.
Я пытаюсь установить значение поля ввода в состояние, чтобы я мог использовать это значение после обновления компонента для перенаправления пользователя на другую страницу. Я проверил путь вручную, и он работает, но, поскольку состояние не обновляется синхронно, перенаправление не работает. Я могу отобразить входное значение на странице, но если я попытаюсь зарегистрировать его, оно будет долго неопределенным (в первый раз) и предыдущее состояние при второй отправке.
import React, { useRef, useState } from "react";
import { db } from "../firebase";
import { Redirect } from "@reach/router";
function CreateProject(props) {
const [id, setID] = useState(null);
const colorRef = useRef(null);
const projectNameRef = useRef(null);
const handleSubmit = e => {
e.preventDefault();
const project = {
name: projectNameRef.current.value,
colors: [colorRef.current.value],
colorName: colorNameRef.current.value,
createdAt: new Date()
};
setID(projectNameRef.current.value);
db.collection("users")
.doc(`${props.user}`)
.collection("projects")
.doc(`${projectNameRef.current.value}`)
.set({ ...project });
e.target.reset();
};
return id ? (
<Redirect from = "/projects/new" to = {`projects/:${id}`} noThrow />
) : (
<div>
<div>
<h1>Create new selection</h1>
<form onSubmit = {handleSubmit}>
<label>Color</label>
<input ref = {colorNameRef} type = "text" name = "colorName" />
<label>Project Name</label>
<input ref = {projectNameRef} type = "text" name = "projectName" required />
<button type = "submit">Submit</button>
</form>
</div>
</div>
);
}
export default CreateProject;
реагировать: 16.8.6
Он перенаправляет, но только на "/projects" вместо "projects/InputValue"
Ответы 2
Вот как работают реагирующие хуки использование состояния, чтобы сделать что-то после изменения состояния, вы должны выполнить это внутри хука использованиеЭффект, например:
useEffect(() => {
if (id) {
console.info(id);
projectNameRef.current.value = ''
}
}, [id])
Этот эффект будет запускаться каждый раз при изменении значения id (и при первом рендеринге), поэтому вы можете добавить туда свою логику и выполнять желаемые действия на основе изменения состояния.
При изменении состояния с помощью useState react не будет ждать его продолжения, он асинхронный, поэтому прослушивание изменений состояния с помощью хука useEffect — это то, что нужно для реакции 16.
Спасибо :), после рефакторинга и добавления useEffect он работал правильно, но не перенаправлял туда, куда должен был, и после многих попыток я понял, что у меня была ошибка в перенаправлении, где вместо этого я перенаправлял на = {projects/:${id}} из to = {projects/${id}}
Я думаю, что вы используете ref здесь неуместно и может быть причиной проблемы.
Я бы переписал вашу функцию следующим образом.
function CreateProject() {
const [id, setID] = useState(null);
const [shouldRedirect, setShouldRedirect] = useState(false);
const handleSubmit = e => {
e.preventDefault();
setShouldRedirect(true);
};
const handleChangeEvent = (e) => {
setID(e.target.value);
}
return shouldRedirect ? (
<Redirect from = "/projects/new" to = {`projects/:${id}`} noThrow />
) : (
<div>
<div>
<h1>Create new selection</h1>
<form onSubmit = {handleSubmit}>
<label>Project Name</label>
<input onChange = {handleChangeEvent} type = "text" name = "projectName" required />
<button type = "submit">Submit</button>
</form>
</div>
</div>
);
Таким образом, ваше состояние всегда обновляется и, следовательно, ваш URL-адрес перенаправления. Когда вы отправляете, вы просто сообщаете компоненту, что теперь он должен отправляться с текущим идентификатором.
Вы можете увидеть, как это работает, из документации React.
Возможно, вы даже сможете заменить условный рендеринг функциональным вызовом history.push с помощью withRouter. Смотрите советы по этому вопросу.
Он вообще перенаправляет? Или в новом URL отсутствует правильный идентификатор?