提问人：Bibek Bhattarai 提问时间：10/12/2023 最后编辑：isherwoodBibek Bhattarai 更新时间：10/12/2023 访问量：33
为什么 useEffect 未按预期更新值？
Why is useEffect not updating values as expected?
问：
我正在尝试使用正则表达式验证手机号码。简单的一个：.+97798XXXXXXXX
我有这 3 种状态：
const [mobile, setMobile] = useState("");
const [validMobile, setValidMobile] = useState(false);
const [focusMobile, setFocusMobile] = useState(false);
这是我的：useEffect
useEffect(() => {
setValidMobile(MOBILE_REGEX.test(mobile));
console.log("validMobile: " + validMobile);
console.log("mobile: " + mobile);
}, [mobile]);
当我在第一次安装时检查控制台时，我的输出为：
validMobile: false
mobile: (is there a way to avoid this as well **not the primary question**)
然后，对于输入到字段的每个值，输出为：
validMobile:false
mobile: numbers being entered
（我正在匹配正则表达式，我的条目是 +977981234567我也可以在控制台中看到。
但现在问题出现了： 当我按下最后一个字符或应该满足正则表达式测试的第 10 个字符时，输出会造成大脑破坏：
validMobile: false (should be true as the regex is fulfilled.
mobile: +9779812345678
有趣的是，如果我再添加 1 个字符，那么输出是：
validMobile: true
mobile: +97798123456789 (the last digit 9 breaks the regex)
就好像代码块在不规则的情况下运行一样。
这是我的移动输入字段：
<input
name="mobile"
type="text"
placeholder="mobile number"
required
autoComplete="off"
onChange={(e) => setMobile(e.target.value)}
onClick={() => setFocusMobile(true)}
onBlur={() => setFocusMobile(false)}
/>
请解释为什么会这样。
答：
1赞
Ross Allen
10/12/2023
#1
你可能不需要你的用例，请参阅 React 关于何时不使用 useEffect 的文档。useEffect
“validMobile”可以作为常规函数调用，它的值可以计算，因此不需要是状态值。
const [mobile, setMobile] = useState("");
const [focusMobile, setFocusMobile] = useState(false);
const validMobile = isValidMobile(mobile);
评论