I’ve been using mescroll in class components, but now I’m using mescroll in function components, and suddenly the nice pull-down refresh stops working, and I’m on a desperate bug-hunting trip.

On the first code

page

<div className="mescroll" id="alreadyPaidWrapper"> <div> <div className={Style.card}> {alreadyPaidList.map((order) => { return ( <CardOrderDetail key={order.orderId} goToNextAction={() => { goToNextAction(order); }} {... order} /> ); })} </div> </div></div>;Copy the code

Create mescroll

useEffect(() => { alreadyPaidScroll = new MeScroll("alreadyPaidWrapper", { down: { use: false, }, up: { use: HtmlNodata: "<div> no </div>", auto: true, // Whether to automatically execute a pull-up callback after initialization isBounce: true, callback: getAlreadyPaidOrderList, }, }); } []);Copy the code

Paging and list information and callback functions

const [alreadyPaidList, updateAlreadyPaidList] = useState([]); const [alreadyPaidPagination, updateAlreadyPaidPagination] = useState({ pageNo: 0, limit: Page :{num:xx,size:xx}}); page:{num:xx,size:xx}); const getAlreadyPaidOrderList = () => { const { pageNo, limit } = alreadyPaidPagination; $http .get("xxx", { params: alreadyPaidPagination, }) .then((data) => { let lists = []; const { dt = [],ss = false} = data; if (ss && dt.length > 0) { lists = alreadyPaidList.concat(transformList(dt)); updateAlreadyPaidPagination({ ... alreadyPaidPagination, pageNo: pageNo + 1, }); updateAlreadyPaidList(lists); alreadyPaidScroll.endSuccess(lists.length, true); if (data.dt.length < limit) { alreadyPaidScroll.showNoMore(); } } else { alreadyPaidScroll.showNoMore(); }}); };Copy the code

And then something happens, and then when I do a pull-down refresh, my callback pageNo of alreadyPaidPagination is always the initial value, which is 0, and I don’t know why you asked me, and I didn’t find the answer online. I guess the English callback cannot get the updated value in state (this is fine if you are writing a class component).

If you can’t get the updated value in state, you can write it directly to the component

let alreadyPaidPagination = { pageNo: 0, limit: 12,}; let lastAlreadyPaidList = []; const [alreadyPaidList, updateAlreadyPaidList] = useState([]); const getAlreadyPaidOrderList = () => { const { pageNo, limit } = alreadyPaidPagination; $http .get("xxx", { params: alreadyPaidPagination, }) .then((data) => { let lists = []; const { dt = [], ss = false} = data; if (ss && dt.length > 0) { lists = lastAlreadyPaidList.concat(transformList(dt)); alreadyPaidPagination = { ... alreadyPaidPagination, pageNo: pageNo + 1, }; updateAlreadyPaidList(lists); lastAlreadyPaidList = lists; alreadyPaidScroll.endSuccess(lists.length, true); if (data.dt.length < limit) { alreadyPaidScroll.showNoMore(); } } else { alreadyPaidScroll.showNoMore(); }}); };Copy the code

Then pull down refresh to work. If anyone knows why this is a problem, please feel free to comment.