Javascript 如何在状态为的窗体上显示/隐藏某些警报

我有一个表格，我想做一个基本的验证检查。我想检查除了复选框之外是否有任何值是empy，但是我们可以从一个验证开始。我想我可以使用

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）

在第一次提交表单并填写

target.name.value

时显示

true

。当前第一次为

false

，之后每次为

true

。所以，除了最初的点击之外，一切似乎都按照我所希望的那样工作。提前感谢

让我们回顾一下

useState

的工作原理

当你这么做的时候

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

您正在创建一个变量（初始值为false）和一个函数。这意味着在处理程序中（假设您正确地填充了一个值）

您将看到记录的

true

，因为

nameVal

是上面的变量（来自

useState

行）。当您运行

setNameVal（false）

时，它基本上会继续执行您的代码，一旦完成，它会在React中触发协调算法，这将导致新的渲染。这一次（第二次），当这条线运行时

const[nameVal，setNameVal]=useState（false）

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

你需要考虑你的功能组件作为状态和道具的功能，你在状态中所做的所有改变都会在下一个渲染周期中渲染新的输出。这意味着，每个渲染都有自己的道具和状态
（但这不是我的，请阅读丹·阿布拉莫夫的这篇精彩文章，其中也谈到了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>
)

const[showMessage，setShowMessage]=useState（false）
常量someEvent=（）=>{
//做事
如果（某些条件）{
设置显示消息（真）
}
}
//更多的东西
返回(
{showMessage&&我是一条消息！}
)

说明：


初始渲染
showMessage
为false，因此
{showMessage&&I am message！}
将返回
false
（这将使React不呈现任何内容）
当某个事件触发我们的函数处理程序时，我们将
showMessage
设置为true
在下一次渲染时（协调算法检测到状态变化并触发新渲染），我们将
showMessage
视为true，因此
span
被渲染
让我们回顾一下
useState
的工作原理

当你这么做的时候

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

您正在创建一个变量（初始值为false）和一个函数。这意味着在处理程序中（假设您正确地填充了一个值）

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

const[nameVal，setNameVal]=useState（false）

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

你需要考虑你的功能组件作为状态和道具的功能，你在状态中所做的所有改变都会在下一个渲染周期中渲染新的输出。这意味着，每个渲染都有自己的道具和状态
（但这不是我的，请阅读丹·阿布拉莫夫的这篇精彩文章，其中也谈到了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>
)

const[showMessage，setShowMessage]=useState（false）
常量someEvent=（）=>{
//做事
如果（某些条件）{
设置显示消息（真）
}
}
//更多的东西
返回(
{showMessage&&我是一条消息！}
)

说明：


初始渲染
showMessage
为false，因此
{showMessage&&I am message！}
将返回
false
（这将使React不呈现任何内容）
当某个事件触发我们的函数处理程序时，我们将
showMessage
设置为true
在下一次渲染时（协调算法检测到状态变化并触发新渲染），我们将
showMessage
视为true，因此
span
被渲染
在初始状态下，namevalue必须为false，如下所示：

const[nameVal，setNameVal]=useState（false）
我建议您将nameVal的新状态设置为：

setNameVal(!nameVal);

在初始状态下，namevalue必须为false，如下所示：

const[nameVal，setNameVal]=useState（false）
我建议您将nameVal的新状态设置为：

setNameVal(!nameVal);

您想只更改一次状态吗？请记住，钩子中的
setXXX
将在下一次渲染中反映值。您看到的
console.log（nameVal）
只是记录变量
nameVal
，此时该变量为
false
，要添加到Gonzalo的点，如果希望状态基于先前的状态值，请传递回调函数