为什么 onChange 触发器更新后我的页面会重新加载？

Question

我已经用不同的方法添加了不同的表单，但是当我在输入字段中输入任何内容时，页面会重新加载并保持状态，并且我必须再次单击该字段并输入，然后会发生相同的循环。如果我添加所有内容作为回报，它工作正常。有人可以解释为什么会发生这种情况以及如何阻止它吗？我也分享一段代码。

function MyForm() {

    const [commentForm, setCommentForm] = useState({

        Comment: "",

    });

    const onCommentChange = (obj) => {

        setCommentForm((prevState) => {

            return {

                ...prevState,

                ...obj,

            };

        });

    };

    const IForm = () => (

        <Table>

            <CardBody>

                <Row>

                    <Col className="col-2">

                        <Label>Comment: </Label>

                    </Col>

                    <Col className="col-1">

                        <Input type="text"

                            value={commentForm.Comment}

                            onChange={(e) =>

                                onCommentChange({ Comment: e.target.value })} />

                    </Col>

                </Row>

            </CardBody>

        </Table>

    );

    return (

        <div>

            <IForm />

        </div>

    )

}

export default MyForm

Answer 1

那是因为您IForm在当前组件内定义为 A 组件，这是不正确的。所以你有两个解决方案。1 - 移出IFORM Component当前反应。function MyForm() {&nbsp; const [commentForm, setCommentForm] = React.useState({&nbsp; &nbsp; Comment: ""&nbsp; });&nbsp; const onCommentChange = (obj) => {&nbsp; &nbsp; setCommentForm((prevState) => {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; ...prevState,&nbsp; &nbsp; &nbsp; &nbsp; ...obj&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; });&nbsp; };&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <IForm commentForm={commentForm} onCommentChange={onCommentChange} />&nbsp; &nbsp; </div>&nbsp; );}export default MyForm;const IForm = ({ commentForm, onCommentChange }) => (&nbsp; <Table>&nbsp; &nbsp; &nbsp; &nbsp; <CardBody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Row>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Col className="col-2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label>Comment: </Label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Col>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Col className="col-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Input type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={commentForm.Comment}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={(e) =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onCommentChange({ Comment: e.target.value })} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Col>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Row>&nbsp; &nbsp; &nbsp; &nbsp; </CardBody>&nbsp; </Table>);2 - 将 IForm 声明为当前组件内的普通函数。function MyForm() {&nbsp; const [commentForm, setCommentForm] = React.useState({&nbsp; &nbsp; Comment: ""&nbsp; });&nbsp; const onCommentChange = (obj) => {&nbsp; &nbsp; setCommentForm((prevState) => {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; ...prevState,&nbsp; &nbsp; &nbsp; &nbsp; ...obj&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; });&nbsp; };&nbsp; const form = () => (&nbsp; &nbsp; <Table>&nbsp; &nbsp; &nbsp; &nbsp; <CardBody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Row>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Col className="col-2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label>Comment: </Label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Col>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Col className="col-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Input type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={commentForm.Comment}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={(e) =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onCommentChange({ Comment: e.target.value })} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Col>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Row>&nbsp; &nbsp; &nbsp; &nbsp; </CardBody>&nbsp; &nbsp; </Table>&nbsp; );&nbsp; return <div> {form()} </div>;}export default MyForm;

Answer 2

原因是 IForm 组件是在 MyForm 组件内部声明的。这意味着每当 MyForm 组件的状态发生变化时，它都会刷新其 dom 树。当 dom 重新渲染功能组件时，IForm 将再次执行，这就是为什么你总是会失去输入的焦点，但永远不会失去 MyForm 组件的状态。要阻止这种情况发生，请在 MyForm 组件外部声明 IForm 组件，或者将 IForm 的 jsx 移至 MyFOrm 组件的 Return 内部。

Answer 3

你应该只是setCommentForm价值。我认为你不需要传播 prevState。您想要实现的是将状态值设置为新值。还有，你没有useEffect权利吗？