nutui-react icon indicating copy to clipboard operation
nutui-react copied to clipboard

InfiniteLoading 已经将hasMore设置为false下拉到最后依然显示加载中

Open dx66668 opened this issue 1 year ago • 1 comments

NutUI React 包名

@nutui/nutui-react

NutUI React 版本号

"@nutui/nutui-react-taro": "^2.0.15",

平台

weapp

重现链接

https://nutui.jd.com/taro/react/2x/#/zh-CN/component/infiniteloading

重现步骤

import React, { useState, useEffect } from 'react' import Taro from '@tarojs/taro' import { Jd } from '@nutui/icons-react-taro' import { Cell, InfiniteLoading } from '@nutui/nutui-react-taro'

const sleep = (time: number): Promise => new Promise((resolve) => {setTimeout(resolve, time)}) const InfiniteUlStyle = { height: '500px', width: '100%', padding: '0', overflowY: 'auto', overflowX: 'hidden', }

const InfiniteLiStyle = { marginTop: '10px', fontSize: '14px', color: 'rgba(100, 100, 100, 1)', textAlign: 'center', } const App = () => { const [defaultList, setDefaultList] = useState<string[]>([]) const [hasMore, setHasMore] = useState(true)

useEffect(() => { init() }, [])

const loadMore = async () => { await sleep(2000) const curLen = defaultList.length for (let i = curLen; i < curLen + 10; i++) { defaultList.push(${i}) } if (defaultList.length >= 30) { setHasMore(false) } else { setDefaultList([...defaultList]) } }

const refresh = async () => { await sleep(1000) Taro.showToast({ title: '刷新成功', icon: 'success', duration: 2000, }) }

const init = () => { for (let i = 0; i < 20; i++) { defaultList.push(${i}) } setDefaultList([...defaultList]) }

return ( <>

基础用法

<Cell>
    <InfiniteLoading pullingText={ <> <i className="top-box-icons"> <svg xmlns="http://www.w3.org/2000/svg" width="36" height="26" viewBox="0 0 36 26" fill="none" > 松开刷新 </> } loadingText={ <> <i className="bottom-box-icons"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" > 加载中 </> } loadMoreText={ <> <i className="bottom-box-icons"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" > <g clipPath="url(#clip0_202_858)"> <clipPath id="clip0_202_858"> </clipPath> 没有更多了 </> } pullRefresh target="scrollDemo" hasMore={hasMore} onLoadMore={loadMore} onRefresh={refresh} > {defaultList.map((item, index) => { return (
  • {item}
  • ) })} </InfiniteLoading>
</Cell> </> ) } export default App

期望的结果是什么?

能够正常显示没有更多数据

实际的结果是什么?

直接使用官网提供的demo就能复现,下拉到最后依然显示加载中,不会显示加载完成

环境信息

Taro v3.6.20

其他补充信息

"dependencies": { "@babel/runtime": "^7.7.7", "@nutui/nutui-react-taro": "^2.0.15", "@tarojs/components": "3.6.20", "@tarojs/helper": "3.6.20", "@tarojs/plugin-framework-react": "3.6.20", "@tarojs/plugin-html": "3.6.20", "@tarojs/plugin-platform-alipay": "3.6.20", "@tarojs/plugin-platform-h5": "3.6.20", "@tarojs/plugin-platform-jd": "3.6.20", "@tarojs/plugin-platform-qq": "3.6.20", "@tarojs/plugin-platform-swan": "3.6.20", "@tarojs/plugin-platform-tt": "3.6.20", "@tarojs/plugin-platform-weapp": "3.6.20", "@tarojs/react": "3.6.20", "@tarojs/runtime": "3.6.20", "@tarojs/shared": "3.6.20", "@tarojs/taro": "3.6.20", "react": "^18.0.0", "react-dom": "^18.0.0", "react-refresh": "^0.11.0", "recoil": "^0.7.7" },

dx66668 avatar Jan 02 '24 07:01 dx66668

可尝试升级到 2.3.4 版本, image

oasis-cloud avatar Jan 03 '24 05:01 oasis-cloud