Ken428965 2022-12-08 00:02 采纳率: 53.4%
浏览 61
已结题

react,获取数据后使用List列表显示出来,列表项共有1220条但只显示出20条?

在使用的react版本如下:

img


已写的代码:


function HouseList() {
    const [list, setList] = useState([])
    const searchHouseList = (value) => {
          API.get('/houses', {
      params: {
        cityId: value,
        ...filters
      }
    }).then(res=>{
    const { list, count } = res.data.body
    setList(list)
    }
  function renderList() {
        return (
      // <>
      <List>
        {list.map((item) => (
          <List.Item 
            key={item.desc}
            prefix={<Image src={BASE_URL + item.houseImg} style={{ borderRadius: 0 }} fit='cover' width={80} height={80}/>} 
            title={item.title}
            description={item.price + '元/月'} 
            onClick={()=>navigate(`/detail/${item.houseCode}`)}
            arrow={false}>
              <div className={styles.desc}>{item.desc}</div>
              <div className={styles.tags}>
                {item.tags.map((tag, index) => {
                  const tagClass = 'tag' + (index + 1)
                  return (
                    <span
                      className={[styles.tag, styles[tagClass]].join(' ')}
                      key={tag}
                    >
                      {tag}
                    </span>
                  )
                })}
              </div>
          </List.Item>
        ))}
      </List>
      // </>
    )
  }
  return (
    <div className={styles.houseItems}>{renderList()}</div>
  )
}

目前的效果是,在后台看到获取到的列表项有1220个,然而界面显示的列表项只有20个

请问代码里有哪些地方写得不对吗?正确的代码写法是什么?请展示代码举例说明。

  • 写回答

2条回答 默认 最新

  • 夜郎king 2022博客之星IT其它领域TOP 12 2022-12-08 08:12
    关注

    可以跟踪一下响应,从后台返回的响应报文中看下响应体有多长大概就知道了。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 12月14日
  • 已采纳回答 12月9日
  • 创建了问题 12月8日

悬赏问题

  • ¥15 霍尔传感器接放大器的应用
  • ¥20 针对计算后数据做一致性检验可以用Bland Altman法吗
  • ¥15 win32如何自绘编辑框的背景图片(语言-c++|操作系统-windows)
  • ¥15 微信夜间被转走了1w对,当天手机剪切板里就出现了这个乱码,有铁子可以看看是啥吗可以
  • ¥50 跑通github上的代码 深度学习 pytorch
  • ¥50 求写,批处理调用分区助手分区脚本
  • ¥15 求购HI3519AV100开发板
  • ¥15 请问1553 RT怎么测试,没有BC有方法吗
  • ¥100 业务编程如何选择学习方向和内容?
  • ¥15 wamp3.3.5安装完成后图标正常显示绿色,鼠标左右键点击图标均无反应。求解决方法。