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



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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 затем добавьте состояние в приложение, в котором хранится текстовое поле для отображения, а затем внутри render() возвращает только текстовое поле, указанное состоянием
всякий раз, когда вы вызываете setState(), форма перерисовывается.
Вы можете узнать о setState в док.
Вы можете принудительно выполнить повторный рендеринг с помощью forceUpdate(), но это не рекомендуется. Как вариант можно сделать this.setState(this.state)
Отрисовывается ли React сразу после изменения состояния? В моем случае я могу установить значение состояния (например, текст метки) перед отправкой формы. Будет ли оно отображаться немедленно?
SetState асинхронный. Выполняемая функция сначала завершит свое выполнение, а затем только повторно отрендерит.
Могу ли я порекомендовать вам поместить
this.setState({ loading: false, });в обещание.then(p => { if (p.status === 200) { return p.json(); } throw '500'; }). Это остановит загрузку, как только вы получите ответ, что намного лучше, чем фиксированная 1 секунда с помощью setTimeout.