javascript - React hooks useState 不随 onChange 更新

Question

这个问题已经有答案了:

Wrong React hooks behaviour with event listener (9 个回答)

已关闭 4 年前。

更新的问题:

如果我在滚动expanded之前在输入字段中输入一些内容prop 被设置为 true - 正确

如果我向下滚动 - 扩展设置为 false - 正确

如果我现在在输入字段中输入内容 expanded仍然是false - 我预计expanded设置为true再次。

代码:

export default () => {

const [expanded, setExpanded] = useState(true)

let searchInput = React.createRef()
let scrollTopValue = 0;

function handleSearchInput() {
    console.log(Boolean(searchInput.current.value.length))
    setExpanded(Boolean(searchInput.current.value.length)) // first time true, don't get re triggered

}

useEffect(() => {
    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
}, []);

function handleScroll() {
    setExpanded(scrollTopValue > document.documentElement.scrollTop)
    scrollTopValue =  document.documentElement.scrollTop
}

return (
<header>
   {expanded? 'expanded': 'nope'}
    <input role="search" ref={searchInput} onChange={handleSearchInput}></input>

</header>)
}

Answer 1

在 React 中更新状态不保证同步调用。因此，当您在更改状态后调用 console.log(expanded) 时，它不会返回新状态。您的组件将在重新渲染时收到新的状态。

您也可以引用这个博客 https://medium.com/@wereHamster/beware-react-setstate-is-asynchronous-ce87ef1a9cf3

另一个引用:- useState set method not reflecting change immediately