React检查Const是不是为空[重复]

Posted 2023-02-22

【中文标题】React检查Const是不是为空[重复]

【英文标题】：React Check if Const is empty [duplicate]React检查Const是否为空[重复]

【发布时间】：2021-08-12 00:24:28

【问题描述】：

你好，我是新来的反应，我有一个问题.. 我想设置一个错误消息并检查它是否为空。

这是我的代码：

const [errormsg, setErrorMsg] = useState("");


const register = (e) =>

    if(firstname === "" || lastname === "")
            setErrorMsg("Please fill out all Gaps!");
            e.preventDefault();
    

    if(errormsg === "")
    //DO SOMETHING
    

但是每次它都会跳过它应该停止的部分。因为即使姓氏为空，它也会继续，但我不知道为什么，因为它应该停在那里。

我还添加了 e.preventDefault();因为我想向用户显示错误消息，如果它在每次提交后重新加载，这不起作用

【问题讨论】：

e.preventDefault(); 应该在第一个 if 条件之上调用

好的，谢谢，但即使错误消息不是“”，它也只会执行第二个 if 语句下的命令

【参考方案1】：

React state 是一种异步的，你不能指望下一行有 state set，所以你应该做的是

const [errormsg, setErrorMsg] = useState("");


const register = (e) =>

    if(firstname === "" || lastname === "")
            setErrorMsg("Please fill out all Gaps!");
            e.preventDefault();
    


useEffect(() => 
  if(errormsg === "")
    //DO SOMETHING
   
, [errormsg])

useEffect 中的回调将在每次errormsg 更改时执行。

【讨论】：

codesandbox.io/s/fancy-surf-sv0ej?file=/src/App.js