我目前遇到一个问题,将输入字段值推送到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
这就是反应钩子使用State的工作方式,在状态改变之后做一些你应该在useEffect钩子里执行它的东西,如下所示:
useEffect(() => {
if (id) {
console.log(id);
projectNameRef.current.value = ''
}
}, [id])
每次id
值更改时(以及在第一次渲染中),此效果都会运行,因此您可以在那里添加逻辑并根据状态更改执行所需的操作。
我认为你在这里使用ref
是不合适的,可能会引起这个问题。我会像这样重写你的功能。
function CreateProject() {
const [id, setID] = useState(null);
const [shouldRedirect, setShouldRedirect] = useState(false);
const handleSubmit = e => {
e.preventDefault();
setShouldRedirect(true);
};
const handleChange = (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={handleChange} type="text" name="projectName" required />
<button type="submit">Submit</button>
</form>
</div>
</div>
);
通过这种方式,您的状态始终在更新,因此您的重定向URL也是如此。提交时,您只需告诉它现在应该使用当前ID提交的组件。
You can see how this works from the React documentation.
您甚至可以使用history.push
对withRouter
进行函数调用来替换条件渲染。 See advice on this question.