Блог

Главная - Вопросы по программированию - Как показать другой div в react 16, когда логическое значение изменяется с false на true?

Как показать другой div в react 16, когда логическое значение изменяется с false на true?

#javascript #reactjs #es6-promise #react-16

#javascript #reactjs #es6-обещание #реакция-16

Вопрос:

У меня есть базовая форма в приложении react 16. После успешной отправки формы я переключаю переменную с false на true , а затем хочу отобразить другой div после переключения логического значения.

Вот мое объявление переменной и функция отправки формы:

 var formSubmitted = false;
const formObj = {};

const requestInfo = (formObj) => {
     formObj.modelNumber = product.modelNumber
     submitForm(formObj)
        .then(value => {
            formSubmitted = true;
            console.log(formSubmitted);
     }, reason => {
         // rejection
     });
};

Вот условный HTML:

 <div>Always showing</div>

{ !formSubmitted amp;amp;
  <div>Form has not been submitted</div>
}

{ formSubmitted amp;amp;
  <div>Form submitted successfully</div>
}

Форма успешно отправляется и консоль.журнал показывает, что переменная formSubmitted была успешно переключена с false на true , однако HTML не меняется. Я новичок в react 16 и не уверен, как обновить компонент.

Спасибо.

Комментарии:

1. Вы не можете просто объявить его как обычную переменную, оно должно быть в состоянии. Только изменения состояния и реквизита запускают повторный рендеринг и обновляют DOM в React

Ответ №1:

Хотя переменная of formSubmitted изменилась, состояние или побочные эффекты не были вызваны, поэтому она не запустила функцию рендеринга React, следовательно, ожидаемые изменения не отражаются на DOM. Вы можете использовать useState для управления логическим значением formSubmitted so, чтобы каждое новое назначение вызывало «рендеринг» для обновления пользовательского интерфейса. Вот фрагмент:

 const [formSubmitted, setFormSubmitted] = useState(false);
const formObj = {};

const requestInfo = (formObj) => {
     formObj.modelNumber = product.modelNumber
     submitForm(formObj)
        .then(value => {
            setFormSubmitted(true);
            console.log(formSubmitted);
     }, reason => {
         // rejection
     });
};
...
<div>Always showing</div>

{ !formSubmitted amp;amp;
  <div>Form has not been submitted</div>
}

{ formSubmitted amp;amp;
  <div>Form submitted successfully</div>
}

И это должно сработать.