Javascript 如何使用UseAncync钩子将数据附加到组件?
我使用react async从api获取数据,如下所示:Javascript 如何使用UseAncync钩子将数据附加到组件?,javascript,reactjs,react-async,Javascript,Reactjs,React Async,我使用react async从api获取数据,如下所示: import {useAsync} from 'react-async' const getOrders = () => ... const MyComponent = () => { const { data, error, isLoading } = useAsync({ promiseFn: getOrders }) if (isLoading) return "Loading..." if (error
import {useAsync} from 'react-async'
const getOrders = () => ...
const MyComponent = () => {
const { data, error, isLoading } = useAsync({ promiseFn: getOrders })
if (isLoading) return "Loading..."
if (error) return `Oopsi`
if (data)
return (
<div>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
)
return null
}
{
设置页面(第+1页);
getOrders()
}>获得更多订单
)
返回空
}
这当前不是内置的异步响应。唯一的方法是保存自己的数据记录(使用单独的
useState
),并在React Async的onResolve
处理程序中更新该记录
我在这里为您设置了一个示例:
跟踪此功能请求已经存在问题:
import {useAsync} from 'react-async'
const getOrders = (page) => ...
const MyComponent = () => {
const [page, setPage] = React.useState(1);
const { data, error, isLoading } = useAsync({ promiseFn: getOrders, page: page })
if (isLoading) return "Loading..."
if (error) return `Oopsi`
if (data)
return (
<div>
<pre>{JSON.stringify(data, null, 2)}</pre>
<button onClick={() => {
setPage(page + 1);
getOrders()
}>Get more orders</button>
</div>
)
return null
}