Question

我对React JS很陌生。我没有维护别人编写的代码。我的问题可能太基本了，对此感到抱歉。

页面中有一个表格。单击“提交”按钮后页面是否重新呈现？在我的onSubmit方法中，没有代码段可以重新渲染网页。例如，提交表单后，我要设置标签“注册成功与否”。另外，如果表单中存在验证错误，我想给输入字段上色。

实际上，我不知道什么时候react重新渲染页面以及页面呈现的哪一部分？如何强制React重新呈现页面中的某个位置？

这是我的onSubmit方法；

onSubmit(e) {
  e.preventDefault();

  this.setState({
    loading: true,
  });

  setTimeout(() => {
    this.setState({
      loading: false,
    });
  }, 1000);

  const data = this.constructFormData();

  fetch('/register', {
    method: 'POST',
    body: data,
  })
    .then(p => {
    if (p.status === 200) {
      return p.json();
    }

    throw '500';
  })
    .catch(err => {
    this.setState({
      error: true,
    });
  });
}

下面是我的表单定义；

<form
    id="register-form"
    method="POST"
    onSubmit={this.onSubmit}
    autoComplete="off"
>

Answer 1

实际上，我不知道什么时候react重新渲染页面以及页面呈现的部分？

它将呈现一次页面，然后仅重新渲染使用setState更改状态的组件。如果重新渲染添加了新元素，它们也会被渲染。

如何强制React重新呈现页面中的某个地方

将更改为状态的数据移至setState并调用它。

Answer 2

每当您致电setState()时，都要重新提交表格。您可以在doc中了解setState。您可以使用forceUpdate()强制重新渲染，但是不建议这样做。或者，您可以执行this.setState(this.state)

React JS-提交表单后，React是否重新渲染网页？

2 个答案: