为什么 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() {

  const [commentForm, setCommentForm] = React.useState({

    Comment: ""

  });

  const onCommentChange = (obj) => {

    setCommentForm((prevState) => {

      return {

        ...prevState,

        ...obj

      };

    });

  };

  return (

    <div>

      <IForm commentForm={commentForm} onCommentChange={onCommentChange} />

    </div>

  );

}

export default MyForm;

const IForm = ({ commentForm, onCommentChange }) => (

  <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>

);

2 - 将 IForm 声明为当前组件内的普通函数。

function MyForm() {

  const [commentForm, setCommentForm] = React.useState({

    Comment: ""

  });

  const onCommentChange = (obj) => {

    setCommentForm((prevState) => {

      return {

        ...prevState,

        ...obj

      };

    });

  };

  const form = () => (

    <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> {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权利吗？