javascript - 如何使用 react Hook useState 在表单上显示/隐藏一些警报

Question

我有一个要进行基本验证检查的表单。我想检查除复选框外是否有任何值是空的，但我们可以只从一个验证开始。我以为我可以使用 useState Hook ，但它总是在第一次提交时将默认值设置为 true(当值已填写时)，即使我在输入值已填写时将值设置为 true .

const [nameVal, setNameVal] = useState(false);


 const submitForm = async (e) => {
  e.preventDefault();


  //console.log(e.target.name.value);

  if(e.target.name.value === ""){
    setNameVal(false);
    console.log(nameVal);
  }
  else{
    setNameVal(true);
    console.log(nameVal);
  }

如何让 console.log(nameVal) 在第一次提交表单时显示 true 和 target.name.value 已填写。目前第一次是false，之后每次都是true。所以除了最初的点击之外，一切似乎都像我想要的那样工作。提前致谢

Answer 1

让我们回顾一下如何useState作品

当你这样做的时候

const [nameVal, setNameVal] = useState(false);

您正在创建一个变量(初始值为 false)和一个函数。这意味着在您的处理程序中(假设您已正确填写一个值)

 const submitForm = async (e) => {
  e.preventDefault();
  if(e.target.name.value === ""){
    setNameVal(false);
    console.log(nameVal); // --> here it will log true

你会看到记录true ，因为 nameVal是上面的变量(来自 useState 行)。当你运行 setNameVal(false)基本上它会继续执行你的代码，一旦完成，它就会触发 React 中的协调算法，这将导致新的渲染。这一次，(第二次)，当这条线运行时

const [nameVal, setNameVal] = useState(false);

nameVal将是真实的。那是因为初始值仅在第一次渲染时使用。并且因为它知道状态的值已经改变，感谢您调用setXXX更新到新状态的函数

您需要将您的功能组件视为状态和 Prop 的函数，并且您对状态所做的所有更改的每一次更改，您都将在下一个渲染周期中渲染新的输出。所以这意味着 - 每个渲染器都有自己的 Prop 和状态

(不过，这不是我的，请阅读 Dan Abramov 的这篇精彩文章，其中也谈到了 useEffect https://overreacted.io/a-complete-guide-to-useeffect/ )

========================

关于您的问题，如何“切换”某些消息以显示 useState ？一般形式可以是

const [showMessage, setShowMessage] = useState(false)

const someEvent = () => {
  // do stuff
  if (someCondition) {
       setShowMessage(true)
  }
}

// more stuff

return (
   <div>
       { showMessage && <span>I am a message!</span>}
        <Foo onChange={someEvent} />
   </div>
)

解释:

• 初始渲染。 showMessage是假的，所以 { showMessage && <span>I am a message!</span>}将返回 false (这使得 React 什么都不渲染)
• 当某些事件触发我们的函数处理程序时，我们将设置 showMessage为真。
• 在下一次渲染中(协调算法检测到状态变化并触发新渲染)，我们看到 showMessage为真，所以 span呈现