reactjs - React Virtuoso 加载更多按钮

Question

我正在阅读 react virtuoso 文档，它有以下示例。

复制它时，我收到此generateUsers函数未定义的错误。

这是我第一次使用 virtuoso，所以我对文档有点迷茫。

任何提示都非常受欢迎

谢谢

import { Virtuoso } from 'react-virtuoso'
import {useState, useEffect, useCallback} from 'react'


const App=()=> {
    const [users, setUsers] = useState(() => [])
    const [loading, setLoading] = useState(false)

  
    const loadMore = useCallback(() => {
      setLoading(true)
      return setTimeout(() => {
        setUsers((users) =>  ([...users, ...generateUsers(100, users.length)]) )
        setLoading(() => false)
      }, 500)
    }, [setUsers, setLoading])
  
    useEffect(() => {
      const timeout = loadMore()
      return () => clearTimeout(timeout)
    }, [])
  
    return (
      <Virtuoso
        style={{height: 300}}
        data={users}
        itemContent={(index, user) => { return (<div style={{ backgroundColor: user.bgColor }}>{user.name}</div>) }}
        components={{
          Footer: () => {
            return (
              <div
                style={{
                  padding: '2rem',
                  display: 'flex',
                  justifyContent: 'center',
                }}
              >
                <button disabled={loading} onClick={loadMore}>
                  {loading ? 'Loading...' : 'Press to load more'}
                </button>
              </div>
            )
          }
        }}
      />
    )
  }


export default App

标签： reactjsreact-virtuoso