Question

更新的问题：

如果在滚动expanded道具之前在输入字段中键入内容，则设置为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

反应挂钩useState不使用onChange更新

1 个答案: