如何使用map - Reactjs在javascript函数中呈现json数据
在JavaScript函数中使用React.js的map方法来呈现JSON数据可以通过以下步骤实现：
- 导入React和相关依赖：
- 导入React和相关依赖：
- 创建一个React组件：
- 创建一个React组件：
- 渲染组件：
- 渲染组件：
上述代码中，我们首先定义了一个名为jsonData的数组，其中包含了一些JSON数据。然后，我们使用map方法遍历jsonData数组，并通过箭头函数返回一个包含<div>元素的数组jsonElements。注意，我们为每个元素指定了一个唯一的key属性。
最后，在组件的render方法中，我们将jsonElements数组作为组件的内容进行渲染，即使用{jsonElements}呈现JSON数据。
这种方法适用于需要以列表形式呈现JSON数据的场景，例如展示用户列表、产品列表等。对于复杂的数据结构，可以进一步组合使用其他React组件来实现更灵活的呈现方式。
腾讯云相关产品推荐：
- 云函数（Serverless）：https://cloud.tencent.com/product/scf
- COS（对象存储）：https://cloud.tencent.com/product/cos
- CVM（云服务器）：https://cloud.tencent.com/product/cvm
- VPC（私有网络）：https://cloud.tencent.com/product/vpc
- CDN（内容分发网络）：https://cloud.tencent.com/product/cdn
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目情况进行评估。
相关·内容
我尝试使用令牌从API中获取数组数据，问题是我无法呈现/绑定到显示，每次调试都会显示这样的错误消息。请指导我，我的新反应，这是我的第一个应用。如何将数组绑定到myadapater？
这里我的代码：
import React, { Component } from "react";
import ReactDOM from "react-dom";
const url = " "; //api customer
const token = " "; //token
class Client extends Component {
浏览 3提问于2021-02-11得票数 1
我在显示从api调用中检索到的嵌套数组数据时遇到问题。JSON数据格式类似于：
[
{
pageNo: 1
TotalRecordsCount: 8000,
Items: [
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
...
}
]
编辑数据格式
浏览 0提问于2018-11-15得票数 2
回答已采纳
Reactjs映射函数无法显示搜索记录
相信我，我有搜索之前的帖子，但大多数解决方案不能解决我的问题。
下面的代码成功地以json格式将数据库中的搜索记录以格式显示为搜索文本框中的用户类型数据，如下面的屏幕截图所示。
这是我的问题。搜索数据以json格式显示，如上面的截图所示。现在我想按照下面的代码用map()方法/函数显示搜索记录
<ul>
{this.state.data.map((obj, i) => (
<li key={i}>
{obj.lastName} - {o
浏览 0提问于2018-12-06得票数 0
回答已采纳
我对javascript和reactJS很陌生，而且我被困住了。我有一个javascript文件，我在这里调用REST。该文件如下所示：
var data;
function getDataRequest() {
const request = new XMLHttpRequest();
request.open('GET', "localhost:8080/getData", true);
request.onload = function () {
var data = JSON.parse(this.response);
浏览 1提问于2018-09-05得票数 3
回答已采纳
2回答
你好，伙计们，我不知道如何从API .中获取数据，更具体地说，我有这样一个API：
{
"data": {
"free_courses": [
{
"id": 7,
"title": "Kiến Thức Nhập Môn IT",
"slug": "lessons-for-newbie",
"description": "Để có cái nhìn tổng quan
浏览 2提问于2022-03-19得票数 1
回答已采纳
我对reactjs很陌生，我试图通过解析json对象来构建一个基本的ui。
class App extends Component {
state ={
products : []
};
render() {
return (
<div>
<Form onSubmit = {this.addNewProducts}/>
<ProductList products = {this.state.products} />
</div>
);
}
}
cons
浏览 0提问于2018-04-26得票数 2
回答已采纳
我正在尝试打印包含一些JSON数据的表，但在使用map方法时无法呈现空数组。 JSON数据： [{
"id": 6,
"firstname": "Sharon",
"lastname": "Jenkins",
"specialties": []
}, {
"id": 2,
"firstname": "Helen",
"lastname": "Leary",
"specialties&
浏览 102提问于2019-02-26得票数 2
回答已采纳
我有一个很大的json数据集，比如：{"date":"2020-03-02"，"state:" Delhi“，”district“：”东德里“......} ......我有不同的过滤器，如日期，州，地区，性别，年龄等..I想要显示基于这些过滤器的数据在不同的Reactjs Components..But它花了太多的时间加载在过滤器上不是很用户friendly..the json包含超过50K对象和本地加载..我已经使用循环和如果其他条件来过滤data..But它采取了太多的time...Is有没有javascript或Reactjs方法来做这种
浏览 0提问于2020-05-04得票数 2
1回答
我有这样的JSON数据。我想呈现子对象标题。但是上面写着"index.js:1警告:列表中的每个孩子都应该有一个唯一的“键”道具。“
[
{
"title": "Components",
"children": [
{
"title": "Buttons",
"url": "url"
}
]
},
{
"title": "Components",
浏览 0提问于2020-05-20得票数 0
回答已采纳
因此，我将从一个提供的实时数据库链接(链接可以在下面的代码中找到)接收原始JSON数据。我试图捕获这些数据并将其显示在一个简单的HTML表上，只是为了测试目的。
我首先用随机API生成器的数据测试了我的代码。而且效果很好。
测试API数据
[
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscip
浏览 3提问于2022-11-14得票数 1
回答已采纳
1回答
ReactJS道具和气泡
、、、
我很难理解为什么我不能这样做。
loadPostsFromServer: function() {
$.ajax({
url: '/allPosts',
dataType: 'json',
success: function(data) {
console.log(data);
this.setState({posts:data, items:data});
//this.setState({items:data});
浏览 2提问于2015-07-08得票数 0
回答已采纳
在学习如何使用Fetch with ReactJS的教程中，我能够从API/json访问特定部分的数据，但是当尝试访问其他部分时，我会得到一个错误。这是JSON文件，它使用以下API：
代码
import React, { Component } from 'react';
import {render} from "react-dom";
import './BuildingSimulation.css';
class BuildingSimulation extends Component {
state = { data: []
浏览 1提问于2018-04-28得票数 0
1回答
我是ReactJS的新手，我试图通过从多个API中获取数据来创建一个具有反应性的搜索特性。下面是Search.js文件。我尝试了很多次，使它的功能，并使结果显示实时打字。但是，我继续收到以下错误消息：TypeError: values.map不是一个函数。我哪里出错了，我该怎么解决呢？
function Search() {
const [input, setInput] = useState("");
const [results, setResults] = useState([]);
const urls = [
'https://jso
浏览 2提问于2021-01-04得票数 1
回答已采纳
我正在将从API中获取的数据打印到一个表中，要将行的数值修正为小数，我将面临一些困难。如果API中的行数据由数值(即10.0, 333, 8 or 100，等)组成，则在最后用十进制值-> 10.00, 333.00, 100.00.呈现它。
我熟悉的.toFixed(2)，函数的反应方式与我以前在javaScript中编写它的方式不同。我认为我误导了ES6标准，但我不确定。如果我避免使用.toFixed(2).，下面是它的样子
下面是我使用rows.toFixed(2)，的代码示例，但它的功能不太好：
class App extends React.Component
{
浏览 2提问于2017-12-07得票数 2
回答已采纳
我有一个假设的JSON文件，如下所示：
{
"main": [
{
"dish": "steak",
"side": [
{"platter": "yogurt"},
{"platter": "popcorn"}
]
},
{
"dish": "fish",
"side": [
浏览 6提问于2016-11-25得票数 0
回答已采纳
我目前的设计是让客户端使用浏览器连接到我的(Java) Web API网关，Web API网关将调用每个(Java)微服务来获取他们的JSON数据，并将其返回给在客户机上发出请求的UI组件。
唯一的客户端呈现将来自每个ReactJS UI组件，用于向网关重复请求。
在服务器端，完整的HTML视图将在发送回客户端之前呈现。
Client browser
▼ (Request Dashboard View)
Web API Gateway
▼ (Request microservice JSON data)
Microservice A JSON Data
Micros
浏览 3提问于2017-04-13得票数 6
回答已采纳
TLDR --您不应该在数据获取请求中实现/调用可重用组件。正确的方法是拥有一个容器组件，它负责获取数据，将其存储在state中，并将其传递给一个表示组件，该组件负责将数据呈现为UI。(例子如下)
最初，我试图做的事情(我假设组件被转换成HTML，可以创建为string -坏实践)：
fetch('http://localhost:8000/api/Books')
.then(response => {
if (!response.ok) {
throw Error('Network req
浏览 2提问于2017-07-25得票数 1
回答已采纳
1回答
我有从一个电子商务网站的网络标签中填充的数据，如果我在一个"data.json“文件中有20页的数据，我如何使它成为这样，使一页显示前20项，下一页显示接下来的20项？
浏览 6提问于2021-12-19得票数 1
3回答
因此，我基本上只有一周的反应，多年来没有编写任何javascript代码。所以请原谅我的无知。
问题我创建了三个不同的组件类
const CreatedDate = React.createClass({
displayName: 'CreatedDate',
propTypes: {
name: 'CreateDate',
from: React.PropTypes.string,
to: React.PropTypes.string,
format: React.PropTypes.string,
onCha
浏览 1提问于2018-05-23得票数 3
回答已采纳
class Rnn extends Component{
constructor(props){
super(props);
this.state={
x:[]
}
}
componentWillMount(){
var api={
getroverss(){
var url="https://fcctop100.herokuapp.com/api/fccusers/top/recent";
return fetch(url).then((res) => res.json());
}
},
api.getrovers().then((res) =>
浏览 0提问于2017-03-18得票数 0
回答已采纳
如何从json文件中获取数据并以升序呈现它们？例如，假设我有这个json文件。
[{
"id": 0,
"name": "Vernon Dunham",
"company": "Qualcore",
"email": "vernon.dunham@qualcore.com"
}, {
"id": 1,
"name": "Dori Neal",
"company": "Sunopia&#
浏览 2提问于2021-09-27得票数 0
3回答
我有这样的json响应： {id: 1, name: a}
{id: 2, name: b}
{id: 3, name: c}
{id: 4, name: d}
{id: 5, name: e}
{id: 6, name: f} 我想在React组件中将它们按2分组，如下所示： <div className="group-item">
<div className="item">a</div>
<div className="item">b&
浏览 18提问于2019-03-01得票数 1
回答已采纳
5回答
我试图映射一个数组并将单击事件放在数组项上。我知道这有点不同，因为JavaScript处理函数的方式不同，但我无法使它工作。我得到错误:无法读取属性'saveInStorage‘的未定义。有人能告诉我我做错了什么吗？提前感谢！这是我的代码：
import React from "react";
const data = require('../data.json');
export default class Gebruikers extends React.Component {
constructor() {
super
浏览 7提问于2018-01-08得票数 1
回答已采纳
在试图将父数据传递给子组件时，我一直在碰壁。
我的看法是：
<%= react_component 'Items', { data: @items } %>
我的Items组件进行ajax调用，设置状态，并呈现Item。将key={this.props.id}排除在传递到映射函数的Item实例之外，这样组件就可以将html呈现到页面上。但是，如果将键加进去，我将得到一个控制台错误：Uncaught TypeError: Cannot read property 'id' of undefined
以下是“物品”：
var Items = React.
浏览 1提问于2016-06-03得票数 3
回答已采纳
我正试图在JSON之后的“天气”表单中获取一个项目“图标”
{
"coord": {
"lon": 14.33,
"lat": 49.94
},
"weather": [{
"id": 800,
"main": "Clear",
"description": "clear sky",
"icon": "01d"
}]
}
我不知道如何通过呈现方法超出数组中的
浏览 0提问于2018-07-02得票数 0
回答已采纳
我试图在<div>中生成列表及其项，但出于某种原因，代码没有呈现。
<div>
{
sarasas.map((obj, key) => {
console.log("cia irgi")
return (
<ul>
<li>{obj.vardas}</li>
<li>{obj.pavarde}</li>
<li>{obj.data}</li>
<
浏览 2提问于2021-05-19得票数 0
回答已采纳
1回答
有没有可以直接获取和显示数据的例子？
假设我们有JSON数据，我们想要显示一些可用的数据，所以如果JSON中有许多对象，一旦一个数据对象准备好了，我们就会显示它，并等待下一次，加载也准备好了。我们在一个端点中完成所有这些工作。
问候
浏览 5提问于2019-11-13得票数 0
1回答
我正在尝试在ReactJS中创建一个表，并使用API数据在其中输入行。柱子是固定的。但不知何故，出现了两个表，数据在这两个表中被分割。
<React.Fragment>
{error ? <p>{error.message}</p> : null}
{!isLoading ? (
users.map(user => {
const { name, owner } = user;
return (
<table class="table table-bor
浏览 6提问于2020-02-27得票数 1
回答已采纳
我对Reactjs和Firebase非常陌生。现在，我试图显示一个图像数组，这些图像是从Firestore SDK9中从选定的文档ID中获取的。例如，我有一个图像数组，如下所示：
我想在"imgUrls“字段中显示带有url链接的所有图像。第一次，我允许用户选择具有唯一ID的选项，并将其链接到包含该ID的所有信息的新页面。
<Link to={`/view/${currentItem.id}`}>
{currentItem.data.dateCreate}
</Link>
然后，获取与此ID相关的所有数据：
useEffect(() =>
浏览 6提问于2022-08-28得票数 0
试图从天气API中提取数据并将其显示在React中，这是一场噩梦，但是当我运行代码时，会得到一个错误：
“对象作为React子对象无效(找到:对象承诺)。如果您打算呈现一个子集合，则使用数组代替。”
我的代码如下：
export default function getWeatherFromApiAsync() {
return fetch(
"https://api.openweathermap.org/data/2.5/weather?q=brighton,uk&appid=8b609354454cdb6c5a7092a939861ace&uni
浏览 0提问于2021-11-16得票数 1
回答已采纳
因此，我试图显示我得到的json数据，并且成功地显示了来自"MenuRole“数组对象的数据，除了"cmsmenuschild”数组对象中的数据之外。我一直在尽力弄清楚如何从它始终显示错误，是否有人知道在我的json data?.any帮助中显示"cmsmenuschild“中的数据有什么问题吗？
json数据
"MenuRole": [
{
"id": 1,
"name": "Manage User",
浏览 1提问于2018-06-24得票数 1
回答已采纳
我正在尝试使用.map()在reactjs中动态地呈现成分/质量/度量值，我在线学习了一些教程，但无法在自己的代码中正确地实现代码。
下面是我当前所遇到的错误：
react-dom.development.js:86 Warning: Functions are not valid as a React child.
This may happen if you return a Component instead of <Component /> from render.
Or maybe you meant to call this function rather than
浏览 6提问于2022-05-17得票数 0
回答已采纳
我很难通过返回JSON数据来呈现HTML。这是没有任何问题的JSON，但我不能以我想要的方式呈现HTML。它呈现的是一个混乱的HTML。
这是我的db.json
{
"houses": [
{
"name": "house 1",
"description": "This is the description of the house 1",
"photos": [
"photo1_house_1.jpg", "
浏览 0提问于2018-04-02得票数 0
回答已采纳
我希望从/list端点加载图书列表(图书文件)，并在<ul>中列出它们。我创建了一个列表组件，然后在index.jsx上导入它。但不起作用。如何使用从body中的服务器获取的json数据来呈现组件？
list.component.jsx
import React from 'react'
class List extends React.Component {
constructor() {
super()
this.state = { files: [] }
}
componentDidMount() {
let files
浏览 0提问于2019-04-10得票数 0
回答已采纳
1回答
我一直在玩星球大战API，我很难从角色()那里获得电影数据。
导出const SwapiFilms = (props) => { const薄膜，setFilms = useState([])；const filmList = props.filmsUrl；useEffect(() => { function ()){ try { const response = Promise.all( filmList.map(Url) => fetch(url).then((res) => res.json( )；console.log(响应)；setFilms(响应)；} ca
浏览 1提问于2020-11-09得票数 1
回答已采纳
3回答
在我的JSON“虚拟”后端，我有一个对象数组(这里只有一个，但这并不重要)。在每个对象中，我都有一个属性"tags“，它也包含一个简单的数组，让我向您展示一个示例 [
{
"title": "Get up and run",
"author": "Johnny",
"tags": ["react", "javascript"]
}
] 我尝试映射一个数组，结果如下：(参见代码) Article title: Get up and run
Writer: Jo
浏览 29提问于2019-06-30得票数 0
回答已采纳
2回答
我尝试使用fetch()方法获取json数据，并使用reactjs将其显示在网页上。到目前为止，下面的代码在控制台中打印数据，但我需要在网页上输出相同类型的数据。如何在页面上显示？ import React from 'react';
export default class PersonList extends React.Component {
componentDidMount() {
fetch(`http://localhost:3000/api/testing2`)
.then((response) => response.json(
浏览 24提问于2020-10-12得票数 0
回答已采纳
JSON.Parse抛出错误！我目前正在通过一个套接字传递数据，我可以成功地读取数据，但是使用它作为json对象给我带来了很多麻烦。这是我的密码
import React, { Component } from "react";
import socketIOClient from "socket.io-client";
class App extends Component {
constructor() {
super();
this.state = {
response: false,
endpoint:
浏览 0提问于2018-01-27得票数 0
回答已采纳
我正在尝试获取从API收到的json列表，并希望在浏览器上呈现这些json列表。我知道了如何从后端的REST中获取数据，现在我想要获取这些json列表并在浏览器上呈现它。以下是我学到的和尝试过的东西：
import React from 'react';
export default class peopleList extends React.Component {
state = {
values: []
}
componentDidMount() {
fetch('http://localhost:3005/
浏览 0提问于2019-04-19得票数 0
回答已采纳
因此，我从reactJS页面加载的API中获取数据。
useEffect(() => {
fetch('https://xxxxx/getdata',{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body:JSON.stringify({
Action : "xxxx",
OrganisationID : "
浏览 2提问于2022-10-27得票数 0
3回答
我需要将嵌套的json (从api中获取这些数据)解析为普通的json (用于创建react表和可视化)，如下所示：
嵌套json :
{ "count":28,
"value":[ {
"id":"dbff7b54",
"name":"cleansed",
"description":"for business",
"url":"https://www.google.com",
"state":"
浏览 7提问于2021-05-05得票数 1
回答已采纳
如何在reactjs材料中加载和映射数据。我通过Cards组件将一个对象传递给子组件。当控制台日志时，我可以接收来自父程序的对象，但它正在抛出failed to compile错误。有人能让我知道我哪里错了吗？
Card.tsx
function createData(type: any, description: any, volume: any) {
return { type, description, volume };
}
class Card extends Component {
constructor(props: any) {
super(props);
浏览 0提问于2019-08-05得票数 0
回答已采纳
1回答
我用ReactJS，NodeJS，MongoDB制作了板球网络应用程序。在前端，我每页显示来自JSON对象的数据，我想显示16个JSON对象。我使用.slice(0,16)方法将JSON对象从REST中切片，REST返回577个对象。现在如何实现页面2,3,4,5的分页。
对于第2页->片(17，33)和第3页->片(34，49)，等等。
下面是我的网页应用程序的代码和屏幕截图：
在content.js中：
import React, { Component } from 'react';
import './content.css';
class
浏览 2提问于2018-01-24得票数 1
回答已采纳
我有json格式的产品，是获取并显示在前端。在我的products.json中，每个产品都有一个图像url，但只有一些产品有图像url，其他的都是空的。当我在react中循环数据时，我总是在react应用程序中得到错误，说无法读取标签中null的属性，我如何编写一个逻辑，只在有图像源时才渲染图像，否则只返回一个空div？ <ul>
{this.state.items.map((items, index) => {
return (
<li className="ProductList-pr
浏览 29提问于2021-01-09得票数 0
我使用构建了一个船视觉器。在查询了API之后，我能够获得我感兴趣的容器的json响应，并将这些API信息写入MongoDB数据库。API请求可以每1分钟完成一次，这就是为什么我使用const NodeCache = require('node-cache');模块来通过1分钟的限制。
问题：万事俱备，但如果我手动刷新页面以查看船只的更新位置并在1分钟前发送请求，则会得到304 of Unhandled promise rejection。这样，程序就不会崩溃，而是在将信息写入MongoDB时不断地跳过1分钟。这意味着，由于刷新页面操作，我每2分钟获得一次位置，而不是每1分钟一次
浏览 0提问于2020-06-16得票数 0
回答已采纳
1回答
您可以找到我的JSON 。我遇到困难的是从React中获取article数据。
我的密码在下面。我的问题中没有包括JSON请求代码，因为它并不是完全的结果。我使用jQuery $.getJSON方法将fulldata的状态替换为数组。因此，假设数据完全在fulldata下。
getInitialState:function(){
return { fulldata: {forthem:[ {articles: [] } ]} }
},
viewer:function(){
return (<ul>
{this.state.fulldata
浏览 3提问于2016-11-22得票数 1
回答已采纳
好的，我正在推进我的项目，从组件中的简单数据数组到对数据的API调用，并且由于在生命中总是如此，组件不再工作。API正在工作--我可以看到数据结果，但它只是没有在呈现中生成它们：
// function
showMainTestimonial(clientId) {
let results = [];
let linkButtonNode = null;
TestimonyApi.getAll()
.then(function (data) {
var data = data.data;
i
浏览 0提问于2015-10-18得票数 1
回答已采纳
在下面的代码片段中，我可以在控制台中看到作业数组，它由Project对象数组组成。每个项目都有jobName和numberOfHighPriorityWarnings。(请查看代码，您将理解我是如何将这些对象设置为数组的)。
我想在VictoryPie 中显示这些内容。在VictoryPie中，每个项目对象变量应设置为x，numberOfHighPriorityWarnings应设置为y变量。这里假设我应该创建一个ForEach循环，它遍历this.state.jobs并检索它的jobName和numberOfHighPriorityWarnings，然后动态创建VictoryPie数据。但我
浏览 21提问于2018-01-15得票数 0
回答已采纳
3回答
我试图调用REST webservice从数据库获取数据，并将JSON对象返回给ReactJS app.When。我从浏览器访问URL，它显示了JSON对象，但当我尝试呈现表中的数据时，没有显示任何内容。
我的示例代码如下所示
import React from 'react';
import $ from 'jquery';
export default class Members extends React.Component {
constructor(props) {
super(props);
this.state = { us
浏览 0提问于2016-10-10得票数 2
2回答
我在做纸牌游戏。我有个json数据库：
{
"characters": [
{
"name": "Character1",
"punch":12,
"kick":12,
"special":15,
"image":"character1"
},
{
"name": "Character2",
"
浏览 0提问于2019-03-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
