當useEffect遇到函式依賴

下面的程式碼實現了一個簡易的登入功能（為了減少程式碼量，去掉了密碼）。

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;

當useEffect遇到函式依賴

相關文章