React TypeScript 16.8 如何添加对 useEffect() 的依赖

Question

在 useEffect() 中，我创建了一些键，然后尝试调用不在 useEffect() 块中的函数 addKeysToState() 并且它导致错误。

我尝试在 useEffect() 结束时将 'addKeysToState' 和 addKeysToState() 添加到数组中，但无济于事。

我得到的错误是...

React Hook useEffect has a missing dependency: 'addKeysToState'. Either include it or remove the dependency array react-hooks/exhaustive-deps

代码片段...

const FeedbackForm: React.FC<props> = ({publicKey}) => {
  const [formState, setState] = useState();

  useEffect(() => {
    const genRandomKey = async () => {
      const tempPrivateKey = await ecc.randomKey();
      if (tempPrivateKey) {
        const tempPublicKey = await ecc.privateToPublic(tempPrivateKey);
        if (tempPublicKey) {
          addKeysToState(tempPrivateKey, tempPublicKey);
        }
      }
    };
    genRandomKey();
  }, []);

  const addKeysToState = (tempPrivateKey: string, tempPublicKey: string) => {
              setState({ 
            ...formState, 
            tempPrivateKey,
            tempPublicKey,
          })
  }

Answer 1

把addKeysToState放在钩子里怎么样？ 看起来它不是依赖项，而是实现细节。

请注意，由于addKeysToState使用先前的状态，因此我们应该改用回调形式，以避免竞争条件。

const FeedbackForm: React.FC<props> = ({publicKey}) => {
  const [formState, setState] = useState();

  useEffect(() => {
    const addKeysToState = (tempPrivateKey: string, tempPublicKey: string) => setState((prevState) => ({ 
     ...prevState, 
     tempPrivateKey,
     tempPublicKey,
   ))
    const genRandomKey = async () => {
      const tempPrivateKey = await ecc.randomKey();
      if (tempPrivateKey) {
        const tempPublicKey = await ecc.privateToPublic(tempPrivateKey);
        if (tempPublicKey) {
          addKeysToState(tempPrivateKey, tempPublicKey);
        }
      }
    };
    genRandomKey();
  }, []);