在 setState 之后反应挂钩 setTimeout

Question

最近想设计一个带有react hooks的输入组件。输入后0.5秒后组件会检查验证

我的代码像

const inputField = ({ name, type, hint, inputValue, setInput }) => {

    // if there is default value, set default value to state
    const [value, setValue] = useState(inputValue);

    // all of validation are true for testing
    const validCheck = () => true;

   let timeout;

    const handleChange = e => {
        clearTimeout(timeout);
        const v = e.target.value;

        setValue(v);

        timeout = setTimeout(() => {
            // if valid
            if (validCheck()) {
               // do something...
            }
        }, 500);
    };

    return (
        <SCinputField>
            <input type={type} onChange={handleChange} />
       </SCinputField>
    );
};

不幸的是，它没有用，因为超时变量每次设置值后都会更新。

我发现 react-hooks 提供了一些功能，比如 useRef 来存储变量。

在这种情况下我应该使用还是不应该使用 react-hooks？

更新

添加使用效果

const inputField = ({ name, type, hint, inputValue, setInput }) => {

    // if there is default value, set default value to state
    const [value, setValue] = useState(inputValue);

    // all of validation are true for testing
    const validCheck = () => true;

   let timeout;

    const handleChange = e => {
        const v = e.target.value;

        setValue(v);
    };

    // handle timeout
    useEffect(() => {
        let timeout;

        if (inputValue !== value) {
            timeout = setTimeout(() => {
                const valid = validCheck(value);
                console.log('fire after a moment');

                setInput({
                    key: name,
                    valid,
                    value
                });
            }, 1000);
        }

        return () => {
            clearTimeout(timeout);
        };
    });


    return (
        <SCinputField>
            <input type={type} onChange={handleChange} />
       </SCinputField>
    );
};

它看起来很有效，但我不确定它是否是正确的使用方法。

Answer 1

你可以移动超时变量里面handleChange方法。

const inputField = ({ name, type, hint, inputValue, setInput }) => {

// if there is default value, set default value to state
const [value, setValue] = useState(inputValue);

// all of validation are true for testing
const validCheck = () => true;

const handleChange = e => {


    let timeout;
    clearTimeout(timeout);
    const v = e.target.value;

    setValue(v);

    timeout = setTimeout(() => {
        // if valid
        if (validCheck()) {
           // do something...
        }
    }, 500);
};

return (
    <SCinputField>
        <input type={type} onChange={handleChange} />
   </SCinputField>
);

};

Answer 2

我会这样做：

import React, {useState, useEffect, useRef} from 'react';

function InputField() {

  const [value, setValue] = useState('');       // STATE FOR THE INPUT VALUE
  const timeoutRef = useRef(null);              // REF TO KEEP TRACK OF THE TIMEOUT

  function validate() {                         // VALIDATE FUNCTION
    console.log('Validating after 500ms...');
  }

  useEffect(() => {                             // EFFECT TO RUN AFTER CHANGE IN VALUE
    if (timeoutRef.current !== null) {          // IF THERE'S A RUNNING TIMEOUT
      clearTimeout(timeoutRef.current);         // THEN, CANCEL IT
    }

    timeoutRef.current = setTimeout(()=> {      // SET A TIMEOUT
      timeoutRef.current = null;                // RESET REF TO NULL WHEN IT RUNS
      value !== '' ? validate() : null;         // VALIDATE ANY NON-EMPTY VALUE
    },500);                                     // AFTER 500ms
  },[value]);                                   // RUN EFFECT AFTER CHANGE IN VALUE

  return(                                       // SIMPLE TEXT INPUT
    <input type='text' 
      value={value} 
      onChange={(e) => setValue(e.target.value)}
    />
  );

}

以下代码段的工作示例：

function InputField() {

  const [value, setValue] = React.useState('');
  const timeoutRef = React.useRef(null);

  function validate() {
    console.log('Validating after 500ms...');
  }

  React.useEffect(() => {
    if (timeoutRef.current !== null) {
      clearTimeout(timeoutRef.current);
    }
     
    timeoutRef.current = setTimeout(()=> {
      timeoutRef.current = null;
      value !== '' ? validate() : null;
    },500);
  },[value]);
  
  return(
    <input type='text' value={value} onChange={(e) => setValue(e.target.value)}/>
  );
  
}

ReactDOM.render(<InputField/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

<div id="root"/>

Answer 3

您不需要保留对渲染之间超时的引用。您可以 return 来自 useEffect 的函数来清除它：

React.useEffect(() => {
  const timeout = setTimeout(()=> {
    if (value !== '') {
      validate();
    }
  }, 500);

  return () => {
    clearTimeout(timeout);  // this guarantees to run right before the next effect
  }
},[value, validate]);

此外，不要忘记将所有依赖项传递给效果，包括 validate 函数。

理想情况下，您可以将 value 作为参数传递给验证函数：validate(value) - 这样，函数的依赖性就会减少，甚至可以是纯函数并移到组件外部。

或者，如果您有内部依赖项（例如另一个 setState 或来自 props 的 onError 回调），请使用 [=20= 创建 validate 函数] 钩子：

const validate = useCallback((value) => {
  // do something with the `value` state
  if ( /* value is NOT valid */ ) {
    onError(); // call the props for an error
  } else {
    onValid();
  }
}, [onError, onValid]); // and any other dependencies your function may use

如果依赖关系不改变，这将在渲染之间保持相同的函数引用。

在 setState 之后反应挂钩 setTimeout

react hooks setTimeout after setState

reactjs

react-hooks