当布尔值从假变为真时，如何在反应 16 中显示不同的 div？

Question

我在 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 &&
  <div>Form has not been submitted</div>
}

{ formSubmitted &&
  <div>Form submitted successfully</div>
}

表单提交成功，console.log 显示变量 formSubmitted 已成功从 false 切换到 true，但是 HTML 是没有改变。我是 React 16 的新手，我不确定如何更新组件。

谢谢。

Answer 1

虽然 formSubmitted 的变量发生了变化，但没有触发任何状态或副作用，因此它没有触发 React 渲染函数，因此您期望的变化不会反映在 DOM .您可以使用 useState 来管理 formSubmitted 的布尔值，这样每个新赋值都会触发 'render' 来更新 UI。这是一个片段：

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 &&
  <div>Form has not been submitted</div>
}

{ formSubmitted &&
  <div>Form submitted successfully</div>
}

这应该有效。

当布尔值从假变为真时，如何在反应 16 中显示不同的 div？

How to show a different div in react 16 when a boolean changes from false to true?

javascript

reactjs

es6-promise

react-16