javascript - 如何使用钩子在reactjs中一起渲染嵌套组件
问题描述
我正在尝试通过相同的表单添加和编辑记录。它工作正常,但在我刷新页面时进行编辑,输入值被擦除。正如我所注意到的,组件在存储值之前正在渲染,并且 useState 正在立即运行,请指导这样做......
编辑链接.js
const EditLink = () => {
const { id } = useParams()
const { links, dispatch } = useContext(LinksContext)
const link = links.find((link) => link.id === id)
const addLink = (updates) => {
database.ref(`links/${id}`)
.set(updates)
.then(() => {
dispatch({
type: "EDIT_LINK",
id,
updates
})
history.push("/dashboard")
})
.catch((e) => {
console.log("Link editing failed", e)
})
}
const removeLink = () => {
database.ref(`links/${id}`)
.remove()
.then(() => {
dispatch({
type: "REMOVE_LINK",
id
})
history.push("/dashboard")
})
}
return (
<>
<Container>
<Alert variant="primary">
<h6 className="mb-0">Edit Link</h6>
</Alert>
</Container>
<LinkForm link={link} addLink={addLink} removeLink={removeLink} />
</>
)
}
LinkForm.js
export const LinkForm = ({ link, addLink, removeLink }) => {
const [title, setTitle] = useState(!!link ? link.title : "")
const [description, setDescription] = useState(!!link ? link.description : "")
const [url, setUrl] = useState(!!link ? link.url : "")
const [tags, setTags] = useState(!!link ? link.tags : "")
const [error, setError] = useState('')
const onSubmit = (e) => {
e.preventDefault()
if (!title || !url) {
setError("Title and Url is compulsary")
} else {
const link = { title, url, description, tags }
addLink(link)
}
}
return (
<Container>
<Row className="justify-content-md-center">
<Col md={6}>
{
error.length > 0 &&
<Alert variant="warning">
{error}
</Alert>
}
<Form onSubmit={onSubmit} >
<Form.Group >
<Form.Control
type="text"
id="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title"
/>
</Form.Group>
<Form.Group >
<Form.Control
type="text"
id="url"
value={url}
onChange={(e) => setUrl(e.target.value)}
placeholder="URL"
/>
</Form.Group>
<Form.Group >
<Form.Control
as="textarea"
rows="2"
id="description"
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Description"
/>
</Form.Group>
<Form.Group >
<Form.Control
as="textarea"
rows="2"
id="tags"
value={tags}
onChange={(e) => setTags(e.target.value)}
placeholder="Tags"
/>
</Form.Group>
<Form.Group as={Row}>
<Col sm={6} className="mb-1">
<Button variant="info" className="w-100" type="submit">Add </Button>
</Col>
{!!link &&
<Col sm={6}>
<Button
id="removeExpanse"
variant="danger"
className="w-100"
onClick={removeLink}
>Remove </Button>
</Col>}
</Form.Group>
</Form>
</Col>
</Row>
</Container>
)
}
请指导我们..
解决方案
它工作正常,但在我刷新页面时进行编辑,输入值被擦除。
为什么你预计会发生相反的情况?当您刷新页面时,您正在重新启动应用程序。跨页面重新加载持久化数据的方法是使用浏览器的localStorage
.
推荐阅读
- python - ValueError:为列找到重复的特征列名称:
- python-3.x - 如何将数学公式转换为 python 代码?
- python - 通过键盘快捷键在vscode中运行python?
- javascript - 为什么我的 && 语句在我制作的这款格斗游戏中不起作用?
- php - ACF字段条件逻辑的foreach数组?
- git - 可以在 Cygwin 中使用 MinGW 版本的 git 吗?
- jquery - 如何使用 Jquery 在 Web 应用程序上继续运行 setInterval
- javascript - fs.createReadStream 不是函数
- angular - 请问如何仅在 Angular 中重新加载后才加载我的第一个选项卡的内容
- java - 尝试在空对象引用上调用虚拟方法“int com.android.server.AlarmManagerService$Batch.size()”