下面的代码实现了一个简易的登录功能(为了减少代码量,去掉了密码)。
import react, { useState } from 'react';
const api = {
login(username) {
console.log('username', username);
},
};
function Login() {
const [username, setUsername] = useState('');
const onSubmit = () => {
if (!username) {
alert('Please input username');
return;
}
api.login(username,);
};
return (
<div>
<h1>Login</h1>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<button onClick={onSubmit}>submit</button>
</div>
);
}
export default Login;
现在我们要增加一个需求:
监听页面上的回车事件,然后发起登录,代码如下:
useEffect(() => {
const onKeyup = (e) => {
if (e.key === 'Enter') {
onSubmit();
}
}
window.addEventListener('keyup', onKeyup);
}, []);
代码看起来没问题,但运行一下,我们就会发现并没有按照预期发展,在输入框已经输入用户名的前提下,页面上还是会一直提示让我们输入用户名。
什么原因?
问题出在onKeyup内部的onSubmit,由于onSubmit所在的useEffect没有依赖,所以只会在初始化执行一次,onSubmit内部的username也就会一直处于初次渲染的状态,值为空字符。
如何解决?
将onSubmit加入useEffect的依赖中。
useEffect(() => {
const onKeyup = (e) => {
if (e.key === 'Enter') {
onSubmit();
}
}
window.addEventListener('keyup', onKeyup);
}, [onSubmit]);
依赖加好了,但是看着上面的代码,我们又会发现一个问题,由于react会在每次渲染的时候重新创建组件内非hooks的值,这就导致了每次渲染的onSubmit的值发生改变,进而导致监听onSubmit的useEffect重复执行。
如何解决?
给onSubmit加上useCallback,将username加入到useCallback的依赖中。
const onSubmit = useCallback(() => {
if (!username) {
alert('Please input username');
return;
}
login(username);
}, [username]);
这样,在每次组件渲染时,只有当username的值发生改变,onSubmit的值才会跟着发生改变,从而解决了useEffect反复执行的问题。
我们再运行一下,又有新问题了!当我们输入的username长度超过1时,会发现login接口被调用了多次。
什么原因?
问题来到了useCallbak,每次username发生变化的时候,onSubmit都会被更新,从而导致useEffect为每次username的改变都执行了一次,也就多次绑定了onKeyup了,结果是多次调用onSubmit。
怎么解决?
利用useEffect的cleanup。在cleanup里面解绑onKeyup。这样就不会存在多次绑定的onKeyup被执行的情况了,只会存在一个最新的onKeyup绑定。
useEffect(() => {
const onKeyup = (e) => {
if (e.key === 'Enter') {
onSubmit();
}
}
window.addEventListener('keyup', onKeyup);
return () => {
window.removeEventListener('keyup', onKeyup);
}
}, [onSubmit]);
至此,代码工作的完好。
完整的代码如下:
import React, { useState, useEffect, useCallback } from 'react';
const login = (username) => {
console.log('username', username);
};
function Login() {
const [username, setUsername] = useState('');
const onSubmit = useCallback(() => {
if (!username) {
alert('Please input username');
return;
}
login(username);
}, [username]);
useEffect(() => {
const onKeyup = (e) => {
if (e.key === 'Enter') {
onSubmit();
}
}
window.addEventListener('keyup', onKeyup);
return () => {
window.removeEventListener('keyup', onKeyup);
}
}, [onSubmit]);
return (
<div>
<h1>Login</h1>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<button onClick={onSubmit}>submit</button>
</div>
);
}
export default Login;
5 天前