反应钩子 useState 不使用 onChange 更新 [重复]答案

【问题标题】：React hooks useState not updating with onChange [duplicate]反应钩子 useState 不使用 onChange 更新 [重复]
【发布时间】：2019-08-07 05:23:45
【问题描述】：

更新问题：

如果我在滚动之前在输入字段中输入内容，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>)
}

【问题讨论】：

我没有看到更新。你的意思是{expanded? 'expanded': 'nope'} 没有按预期工作吗？您发布的代码中没有问题。
更新问题，希望我能更好地解释自己
如果您有未解决的问题，我会取消重复问题并尝试回答。但就我所见，没有问题。更改和滚动处理程序都按预期更新状态 stackblitz.com/edit/react-ccv6dh 。这无法复制，如果我在输入字段中键入内容，现在展开仍然是错误的。
感谢您的代码，我一定有其他一些我不知道的错误。感谢您抽出宝贵时间，我会看看我的管道有什么不同
不客气。如果您想出一个可以复制问题的示例，请随时联系我。

标签： javascript reactjs react-hooks

【解决方案1】：

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

你也可以参考这个博客 https://medium.com/@wereHamster/beware-react-setstate-is-asynchronous-ce87ef1a9cf3

另一个参考：- useState set method not reflecting change immediately

【讨论】：

能否请您帮忙看看更新布尔值的解决方案是什么？我已经尝试了这些链接中的所有解决方案，但似乎没有任何效果。我正在使用 useEffect() 来检测更改，并且在 useEffect 内部更改正在发生，但是当我使用该值发出 api 请求时，更改的布尔值仍处于先前状态。
您能否将其作为一个单独的问题发布并提供更多详细信息，并在此处链接 cmets 中的问题
@HishamHafeel 我也有同样的问题。更改的状态会呈现，但在进行 API 调用时它仍然是相同的。你解决了吗？
@Junaid 能否请您创建一个单独的问题，其中包含您所面临问题的详细信息并将其链接到我以便我可以检查