使用 useEffect() 钩子处理关键事件的正确方法是什么，另一方面会触发本地状态更改？

如何解决使用 useEffect() 钩子处理关键事件的正确方法是什么，另一方面会触发本地状态更改？

React Hooks 的新手，我遇到了这个问题。我有一个功能组件，当我按下回车键（keycode = 13）时，它接受输入并将其发送到父组件。组件看起来像这样。

SELECT CONCAT(id_prefix,id) as prefixed_id,...

问题是每次 const SearchTermBar = (props) => { const {resetStateSearchTerm,handlePowerToggleParent} = props; const [inputTerm,handleInputChange] = useState(''); const inputRef = useRef(); useEffect(() => { const keyPressEvent = (e) => { if (e.keyCode === 13) { resetStateSearchTerm(inputTerm); handleInputChange(''); handlePowerToggleParent('search'); } }; inputRef.current.addEventListener('keydown',keyPressEvent); let parentInputRef = inputRef; return () => { console.log('remove event listener'); parentInputRef.current.removeEventListener('keydown',keyPressEvent); } },[inputTerm,resetStateSearchTerm,handlePowerToggleParent]); return ( <div className='SearchTermBar'> <input type='text' placeholder='Enter search term here (Press return to confirm)' className='SearchTermBar__Input' value={inputTerm} onChange={(e) => handleInputChange(e.target.value)} ref={inputRef} /> </div> ); 或 inputTerm 值更改时都会注册和取消注册事件。但我无法找出处理事件注册/删除的正确方法（理想情况下应该发生一次）我知道这是因为对 props 的依赖，但我想知道更好的解决方案这个问题。

解决方法

你已经有了输入引用，你真的不需要状态：

    function create_mpg_aes_encrypt($parameter = "",$key = "",$iv = ""){
    $return_str = '';
    if(!empty($parameter)) {
       
        // URL ENCODED QUERY STRING
       $return_str = http_build_query($parameter);
       //echo $return_str;
    }
    
    return trim(bin2hex(openssl_encrypt(addpadding($return_str),'aes-256-cbc',$key,OPENSSL_RAW_DATA|OPENSSL_ZERO_PADDING,$iv)));
}
function addpadding($string,$blocksize = 32) {
    $len = strlen($string);
    $pad = $blocksize - ($len % $blocksize);
    $string .= str_repeat(chr($pad),$pad);
    return $string;
}

$trade_info_arr = array( 
    'MerchantID' => 3430112,'RespondType' => 'JSON','TimeStamp' => 1485232229,'Version' => 1.4,'MerchantOrderNo' => 'S_1485232229','Amt' => 40,'ItemDesc' => 'UnitTest' 
);  

$mer_key ='12345678901234567890123456789012';
$mer_iv = '1234567890123456'; 

// Result I expected to get
/*ff91c8aa01379e4de621a44e5f11f72e4d25bdb1a18242db6cef9ef07d80b0165e476fd1d9acaa53170272c82d122961e1a0700a7427cfa1cf90db7f6d6593bbc93102a4d4b9b66d9974c13c31a7ab4bba1d4e0790f0cbbbd7ad64c6d3c8012a601ceaa808bff70f94a8efa5a4f984b9d41304ffd879612177c622f75f4214fa*/

无论哪种方式，如果你想保持状态，它的值应该被复制到一个 ref 中以修复 const NOP = () => {}; const DEFAULT_INPUT = ""; function SearchTermBar(props) { const { resetStateSearchTerm = NOP,handlePowerToggleParent = NOP } = props; const inputRef = useRef(); useEffect(() => { const keyPressEvent = (e) => { if (e.keyCode === 13) { resetStateSearchTerm(inputRef.current.value); inputRef.current.value = DEFAULT_INPUT; handlePowerToggleParent("search"); } }; inputRef.current.addEventListener("keydown",keyPressEvent); let parentInputRef = inputRef; return () => { console.log("remove event listener"); parentInputRef.current.removeEventListener("keydown",keyPressEvent); }; },[resetStateSearchTerm,handlePowerToggleParent]); return ( <input type="text" placeholder="Enter search term here (Press return to confirm)" style={{ width: "50%" }} ref={inputRef} /> ); } 中的闭包。可以通过添加另一个 useEffect 来更新提到的引用。