reactjs - 使用 useState 通过单击按钮来响应更新状态
问题描述
谁能向我解释一下解决以下问题的“正确”方法是什么。我有这个包含事件数据的简单页面。最初这是上周的数据,但页面上有一个按钮可以将数据设置为全部。我使用 useEffect() 来 loadData() 并最初设置 all=false。当我单击按钮时,我想将 all 更新为 true 并将 data 更新为所有数据。
下面的代码有效,但有点奇怪,因为我首先必须获取 !all 的数据,然后我设置 all=true,然后它会再次重新渲染。
有没有很好的方法来做到这一点?我试着把“onClick”代码反过来,所以:setAll(!all);loadData(all),但这不起作用,因为状态没有立即更新。
任何帮助/提示都会很棒!
const Events = ({auth}) => {
const [data, setEventData] = useState([])
const [all, setAll] = useState(false)
const loadData = async (givenScope) => {
const scope = (givenScope ? '' : '?scope=last_week')
const eventdata = await makeAPICall('/api/events' + scope, 'GET', null, await auth.getAccessToken())
setEventData(eventdata);
}
useEffect(() => {
loadData(all);
}, [])
const columns = [{
Header: 'Datum/tijd',
accessor: 'datetime',
Cell: props => <Moment date={props.value} tz="Europe/Amsterdam" format="YYYY-MM-DD HH:mm"/>
}, {
Header: 'Event',
accessor: 'value',
}]
return <div><Button onClick={() => {loadData(!all);setAll(!all)}}>{all ? 'Last week' : 'All'}</Button> <DefaultTable data={data} columns={columns} loading={data.length > 0 ? false : true} /></div>
}
解决方案
处理上述代码的一种相对简单的方法是将all
值作为值传递给依赖数组,useEffect
这样您就不用担心loadData
在状态更新后被执行
const Events = ({auth}) => {
const [data, setEventData] = useState([])
const [all, setAll] = useState(false)
const loadData = async (givenScope) => {
const scope = (givenScope ? '' : '?scope=last_week')
const eventdata = await makeAPICall('/api/events' + scope, 'GET', null, await auth.getAccessToken())
setEventData(eventdata);
}
useEffect(() => {
loadData(all);
}, [all])
const columns = [{
Header: 'Datum/tijd',
accessor: 'datetime',
Cell: props => <Moment date={props.value} tz="Europe/Amsterdam" format="YYYY-MM-DD HH:mm"/>
}, {
Header: 'Event',
accessor: 'value',
}]
return <div><Button onClick={() => {setAll(all => !all)}}>{all ? 'Last week' : 'All'}</Button> <DefaultTable data={data} columns={columns} loading={data.length > 0 ? false : true} /></div>
}
并且在任何情况下,您的代码都会呈现两次,因为数据是异步可用的。为了改善用户体验,您可以在获取数据时显示加载器。
推荐阅读
- django - 当用户单击提交按钮时,付款重定向无法正常工作
- pthreads - WebAssembly pthreads
- delphi-xe - DELPHI FIREDAC 主从关系和计算字段之间的优先级
- asp.net-core - IdentityServer4 通过 ProfileService 中的 ApiResource 限制声明
- video - FFMPEG、H264 编码:如果帧大小超过级别限制,是否会导致视频编码失败?
- css - 动画不适用于计算的 CSS 变量
- tinymce - 微小的 MCE 菜单项命名
- c# - IIS 进程启动,但 ASP.NET 核心不会,除非我请求页面
- discord.js - 是否可以让不和谐的机器人写在 word 文档中?(discord.js)
- java - 关闭后无法在退出的应用程序中保持登录