如何仅使用React返回JSON数据的前10个结果

StackUnderFlow

我正在尝试仅提取JSON文件(ID为1-10)中的前10个条目。寻找下面的代码是否可行以及最好的方法是什么。我希望控制显示到前10个结果中的数量,并添加一个按钮以加载更多10个结果(ID为11-20等)

这是我提取结果的方式:

import React, { Component } from 'react'
import PostData from '../data/posts.json'

    class PostList extends Component {
      render () {
        return (
          <div>
            <h1>Welcome</h1>
            {PostData.map((postDetail, index) => {
              return <h2>{postDetailDetail.title}</h2>
            })}
          </div>
        )
      }
    }

这是posts.json文件的快照(不完整):

[
  {
    "id": 1,
    "title": "Hello World",
    "content": "content goes here",
  },
  {
    "id": 2,
    "title": "Hello React",
    "content": "another content goes here",
  },
  // ...continued entries. Cut off to save space.
]
什米利·布鲁(Shmili Breuer)

你可以这样

 {PostData.map((postDetail, index) => {
     return index <= 9 ? <h2>{postDetailDetail.title}</h2> : undefined
 })}

仅在索引小于或等于9时返回html(这是从10开始的第十个位置)

这是带有增加按钮的完整示例

import React, { Component } from 'react'
import PostData from '../data/posts.json'

class PostList extends Component {

    state = {showCount: 10}

    render () {
        return (
            <div>
                <h1>Welcome</h1>
                
                {PostData.map((postDetail, index) => {
                    return index + 1 <= showCount ? <h2>{postDetailDetail.title}</h2> : undefined
                })}
                <button 
                    onClick={() => this.setState(prevState => {
                        showCount: prevState.showCount + 10
                    })}>
                Increase show count</button>
                
            </div>
        )
    }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用slice()仅返回前5个结果

如何仅使用python请求模块从拨号搜索结果页面中抓取所有结果(不仅是前10个结果)?

如何仅使用Iterator显示Vector的前10个元素?

SQLite:仅返回每个组中的前2个结果

刮板仅返回前2个输入的结果

Laravel仅使用with返回数据库的第一个结果

Sequelize-如何仅返回数据库结果的JSON对象?

如何使用每行仅返回一个结果的正则表达式进行搜索

如何使用 C# 从 LUIS 返回的 JSON 结果中仅获取“意图”字段

如何使getaddrinfo仅返回一个结果?

分页仅显示前10个结果,而不是x个页面,每个页面上有10个结果

如何使用CAST数据创建一列并获取前5个结果?

答案的数据框,如何仅保留前100个答案

如何仅保留数据框中的前N个值

如何基于列数据获取前150个结果

GraphRequest仅返回25个结果

SQLAlchemy查询仅返回n个结果?

SQLAlchemy查询仅返回n个结果?

如何排序JSON数据-从最低到最高排序返回结果

如何从两个查询中仅返回一个查询结果

如何使用带有最大命中文档的其余查询从 Elastic 搜索中获得前 10 个结果?

Facebook graph api开始仅返回组供稿中的前10个帖子

使用状态代码和json数据获取结果返回

如何在PHP中使用JSON获取数组的前10个值

如何使用python从嵌套的json文件中获取前10个项目?

返回前如何格式化数据json?

beautifulsoup仅提取前10个元素

如何从 JSON 响应 DART 返回前五个值

如何在 React Native 中仅使用 if 语句返回 useEffect