Question

问题：：inputVal是我使用setState更新的状态变量。

当按钮调用我的handleConfirmSubmit函数时，它可以正常工作。

但是，如果我添加了eventListener来监听按键，然后触发了功能onKeyUp，然后又触发了handleConfirmSubmit ...突然之间handleConfirmSubmit看不到更新后的状态值。

我在键入时添加了useEffect以控制台注销inputVal，并且可以确认它正在更新，但是由于某些原因，取决于我在哪里调用handleConfirmSubmit，它可以或看不到更新后的状态值。

代码：（已经删除了一些不必要的内容）

export default function SingleInputModal(props){
    const [cancelButton, setCancelButton] = useState(null);
    const [inputVal, setInputVal] = useState(props.previousValue || '');

    //ComponentDidMount
    useEffect( () => {

        //Listen for keypress
        window.addEventListener('keyup', onKeyUp);

        return () => {
            window.removeEventListener('keyup', onKeyUp);
        }
    }, []);

    useEffect( () => {
        console.log('new inputval', inputVal);
    },[inputVal])

    const handleChange = (e) => {
        console.log('handle Change ran', e.target.value);
        setInputVal(e.target.value || '');
    }

    const handleConfirmSubmit = () => {
        console.log('About to submit: ', inputVal);
        props.handleConfirmation(false, inputVal)
    }

    const onKeyUp = (e) => {
        if(props.submitOnEnter && e.key === 'Enter'){
            //Submit
            handleConfirmSubmit();
        }
        if(props.cancelOnESC && e.key === 'Escape'){
            //Cancel
            props.handleConfirmation(true, null);
        }
    }

    return(
        <div className="confirm"
        >
            <div className="modal singleInput"
            >
                <div className="content">
                    <input 
                        className='myModal__textInput'
                        type='text'
                        value={inputVal}
                        onChange={handleChange}
                    />
                </div>
                <div className="actions">
                        <a 
                        onClick={handleConfirmSubmit}
                        >Submit</a>
                </div>
            </div>
        </div>
    )
}

Answer 1

您可以使用[C11: 6.7.9/21]:来确保您使用的是最新版本的函数（因为React.useCallback可以捕获handleConfirmSubmit的闭包）：

inputVal

Answer 2

您可以在inputVal更改时更新侦听器，否则侦听器将存储第一个渲染器中inputVal值的副本。

useEffect( () => {

    //Listen for keypress
    window.addEventListener('keyup', onKeyUp);

    return () => {
        window.removeEventListener('keyup', onKeyUp);
    }
}, [inputVal]);

React Hooks：无法访问更新的useState变量

2 个答案: