当 boolean 从 false 变为 true 时，如何在 react 16 中显示不同的 div？

Question

我在 React 16 应用程序中有一个基本表单。 成功提交表单后，我将变量从false切换为true ，然后我想在切换 boolean 后显示不同的 div。

这是我的变量声明和表单提交 function：

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的变量发生了变化，但没有 state 或副作用被触发，所以它没有触发 React 渲染 function 因此你期望的变化没有反映在 DOM 上。 您可以使用useState来管理 formSubmitted 的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>
}

这应该有效。