React JS - React повторно отображает веб-страницу после отправки формы?

Я новичок в 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"
>

Могу ли я порекомендовать вам поместить this.setState({ loading: false, }); в обещание .then(p => { if (p.status === 200) { return p.json(); } throw '500'; }). Это остановит загрузку, как только вы получите ответ, что намного лучше, чем фиксированная 1 секунда с помощью setTimeout.

Mirakurun 27.12.2018 12:06
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
6 735
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Actually I do not know when react re-renders page and which part of the page it renders ?

Он отображает страницу один раз, а затем повторно отображает только компонент, состояние которого было изменено с помощью setState. Если этот повторный рендеринг добавляет новые элементы, они тоже будут отображаться.

How can I force React to re-render somewhere in the page

Переместите данные, которые изменяются, в состояние и вызовите setState, если оно изменится.

вы имеете в виду всю страницу из компонента? Например, у меня есть веб-страница, и определение моего класса начинается с класса App extends Component {... У меня есть 4 текстовых поля на этой странице. Могу ли я отобразить только одно текстовое поле на этой странице?

mhendek 27.12.2018 12:23

@mhendek затем добавьте состояние в приложение, в котором хранится текстовое поле для отображения, а затем внутри render() возвращает только текстовое поле, указанное состоянием

Jonas Wilms 27.12.2018 12:25
Ответ принят как подходящий

всякий раз, когда вы вызываете setState(), форма перерисовывается. Вы можете узнать о setState в док. Вы можете принудительно выполнить повторный рендеринг с помощью forceUpdate(), но это не рекомендуется. Как вариант можно сделать this.setState(this.state)

Отрисовывается ли React сразу после изменения состояния? В моем случае я могу установить значение состояния (например, текст метки) перед отправкой формы. Будет ли оно отображаться немедленно?

mhendek 27.12.2018 12:10

SetState асинхронный. Выполняемая функция сначала завершит свое выполнение, а затем только повторно отрендерит.

Ashish 27.12.2018 12:13

Другие вопросы по теме