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

Question

我在 react 16 应用程序中有一个基本表单。成功提交表单后，我将一个变量从falseto切换，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 没有改变。我是反应 16 的新手，我不确定如何更新组件。

谢谢你。

Answer 1

尽管变量 offormSubmitted发生了变化，但没有触发任何状态或副作用，因此它没有触发 React 渲染函数，因此您期望的更改不会反映在 DOM 上。您可以使用它useState来管理布尔值，formSubmitted因此每个新分配都会触发“渲染”以更新 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>
}

这应该有效。