我有一个表单，我想做一个基本的验证检查。我想检查除复选框外是否有任何值是空的，但我们可以从一个验证开始。我以为我可以使用useState钩子，但它总是在第一次提交时(填写值时(将默认值设置为 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(和一个函数。这意味着在您的处理程序中(假设您已正确填写值(
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函数以更新到新状态
您需要将功能组件视为状态和 props 的函数，并且您对状态所做的所有更改的每次更改都将在下一个渲染周期中渲染新的输出。这意味着 -每个渲染都有自己的道具和状态
(不过，这不是我的，请阅读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设置为 true。 - 在下一次渲染时(协调算法检测到状态更改并触发新的渲染(，我们将
showMessage视为 true，因此span被渲染
在初始状态下，名称值为 false，如下所示：
const [nameVal, setNameVal] = useState(false);我建议你像这样设置nameVal的新状态：
setNameVal(!nameVal);