如何在reactjs中使用钩子将嵌套的组件渲染在一起?

问题描述 投票:0回答:1

我试图通过同一个表单添加和编辑记录,工作正常,但在编辑时,当我刷新页面时,输入值被抹去。但在编辑时,当我刷新页面时,输入值被擦掉了。我注意到,Component在存储值之前正在渲染,并且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>
    )
}

请指导我们。

javascript reactjs react-hooks crud react-devtools
1个回答
0
投票

它工作正常,但当我刷新页面时,编辑时,输入值被擦除。

为什么你希望发生相反的情况?当你刷新页面时,你会重新启动应用程序。在页面重新加载时持久化数据的方法是使用浏览器的 localStorage.

© www.soinside.com 2019 - 2024. All rights reserved.