将json映射到React render时遇到问题。
将json映射到React render时遇到问题是一个常见的开发问题。在React中，我们通常使用组件的props来传递数据，而将json映射到React render中可以通过以下步骤解决问题：
- 解析JSON数据：首先，我们需要将JSON数据解析为JavaScript对象。可以使用JSON.parse()方法将JSON字符串转换为对象。
- 创建React组件：根据JSON数据的结构，我们可以创建相应的React组件来展示数据。可以使用函数组件或类组件来创建组件。
- 传递数据：将解析后的JSON数据作为组件的props传递给相应的React组件。可以使用属性传递的方式将数据传递给组件。
- 渲染组件：在React的render方法中，使用解析后的JSON数据创建相应的React组件，并将其渲染到DOM中。
以下是一个示例代码，演示了如何将JSON数据映射到React render中：
import React from 'react';
// 解析JSON数据
const jsonData = '{"name": "John", "age": 30, "city": "New York"}';
const data = JSON.parse(jsonData);
// 创建React组件
function UserInfo(props) {
return (
<div>
<h2>User Information</h2>
<p>Name: {props.name}</p>
<p>Age: {props.age}</p>
<p>City: {props.city}</p>
</div>
);
}
// 渲染组件
function App() {
return (
<div>
<h1>My App</h1>
<UserInfo name={data.name} age={data.age} city={data.city} />
</div>
);
}
export default App;在上面的示例中，我们首先解析了一个包含用户信息的JSON数据。然后，创建了一个名为UserInfo的React组件，该组件接受name、age和city作为props，并将其展示在页面上。最后，在App组件中，将解析后的JSON数据传递给UserInfo组件，并将其渲染到DOM中。
这样，当我们在React应用中使用该组件时，就可以将JSON数据映射到React render中了。
腾讯云相关产品和产品介绍链接地址：
- 云开发（https://cloud.tencent.com/product/tcb）
- 云服务器（https://cloud.tencent.com/product/cvm）
- 云数据库 MySQL（https://cloud.tencent.com/product/cdb）
- 人工智能（https://cloud.tencent.com/product/ai）
- 云存储（https://cloud.tencent.com/product/cos）
- 区块链（https://cloud.tencent.com/product/baas）
- 物联网（https://cloud.tencent.com/product/iotexplorer）
- 移动开发（https://cloud.tencent.com/product/mobility）
- 音视频处理（https://cloud.tencent.com/product/mps）
- 网络安全（https://cloud.tencent.com/product/ssm）
- 云原生应用引擎（https://cloud.tencent.com/product/tke）
- 网络通信（https://cloud.tencent.com/product/im）
- 元宇宙（https://cloud.tencent.com/product/vr）
相关·内容
因此，对于实践，我尝试使用react框架来使用rest点。但不知怎的，我犯了个错误，比如：
TypeError: Cannot read property 'map' of undefined
Json看起来是这样的：
{
"name":"sadasd.tx",
"application":"Word",
"id":"123",
"type":"Mixed",
"containers":[
浏览 0提问于2019-06-13得票数 0
回答已采纳
我正在经历一些使用react和fetch的意外行为。应该非常直截了当。
我的代码如下所示：
import React, { Component } from 'react';
class App extends Component {
componentDidMount() {
fetch('/dict.json')
.then(res => res.json())
.then(json => console.log(json))
}
render() {
return (
<p>
浏览 1提问于2017-10-28得票数 1
我在我的计数器应用程序中将计数重置为0时遇到问题。它没有将任何计数器的计数重置为0，我已经尝试对每个counter.count执行console.log，但显示为undefined。 App.js import React from "react";
import "./App.css";
import Counter from "./components/Counter";
export class App extends React.Component {
state = {
counters: []
};
addC
浏览 14提问于2019-10-10得票数 0
我在尝试更改导航栏的颜色时遇到问题。我遗漏了什么步骤吗？
这是我试图呈现的组件：
import React from 'react';
import { Nav, Navbar } from 'react-bootstrap';
import styles from './MainMenu.module.css';
const Topbar = () => {
return(
<Navbar className={styles.mainBar}>
<Navbar.Brand&g
浏览 8提问于2021-06-04得票数 1
1回答
我在访问使用react-router的render方法呈现的有状态组件中的url参数时遇到问题。我已经读到，如果我想通过react-router将道具传递到一个组件中，最好的方法是使用render函数。 下面是我的带有Link和Route的App组件 import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import StatefulComponent
浏览 9提问于2019-07-04得票数 0
我正在构建一个react本机应用程序，但我注意到，当我将一些操作分派到redux存储时，componentWillReceiveProps就不会被调用，只有在刷新屏幕时才会调用它。
组件
import React from 'react';
import { connect } from 'react-redux';
import { renderLogin } from '../../components/Auth/Login';
class HomeScreen extends React.Component {
componentW
浏览 0提问于2018-04-09得票数 0
我是新的反应，我得到的Objects are not valid as a React child (found: object with keys {id, description, status, priority, created, deadline, emp}). If you meant to render a collection of children, use an array instead.错误，并跟随来解决这个问题。
在使用map函数运行对象时，我会得到空错误。在传递对象JSON.stringify()时，我将得到确保该API返回数据的字符串。
这是我的资料。
[
浏览 4提问于2022-07-23得票数 0
回答已采纳
2回答
使用redux从api获取数据时遇到问题。我正在使用React前端和express后端。我正尝试在后台通过Google OAuth设置身份验证，然后将报头(设置成功)发送回我的React客户端。我可以成功地从api获取一些数据，但不能使用redux获取用户。
我用于获取用户的操作创建器：
export const fetchUser = () => async dispatch => {
const res = await posts.get ('/api/current_user');
dispatch ({type: FETCH_USER, payloa
浏览 16提问于2019-11-13得票数 0
我是新来的ReactJS，所以经常遇到问题..。
因此：
@CommentBox = React.createClass
getInitialState: ->
data: []
componentWillMount: ->
request_data = null
val = $.ajax
url: @props.url
dataType: 'json'
success: (data, status, xhr) ->
request_data = JSON.parse xhr
浏览 2提问于2015-03-01得票数 1
回答已采纳
1回答
我想使用指定的HTML标记导入带有子组件的组件 我想我快到了，但我在出口方面遇到了一些问题。添加了更多数据。 usingTable.js import React, { Component } from "react";
import tableHeader from ".components/data/tableHeader.json";
import Rows from ".components/data/rows.json";
import Table, {Row} from "./components/table.js"
浏览 9提问于2019-09-09得票数 0
我在从组件导出上下文时遇到问题。包含上下文的组件如下所示。
import React, { Component, createContext} from 'react';
export const MyContext = React.createContext('');
export default class ComponentOne extends Component {
....
....
render(){
return(
<MyContext.Provider value={'value1
浏览 25提问于2019-11-26得票数 4
2回答
我在渲染时遇到问题。到目前为止，我是如何设置我的文件的。首先是app.js文件：
import React from 'react';
import MainPage from './MainPage';
export class App extends React.Component {
render() {
return (
<div>
<MainPage />
</div>
)
}
}
下面是名为index.js的第二个关联文件：
import React
浏览 0提问于2018-02-19得票数 0
我在显示分页时遇到问题。我正在使用Wordpress REST API来获取我的帖子，下面是我的代码：
import React, { Component } from "react";
import "./App.css";
class App extends React.Component {
constructor() {
super();
this.state = {
items: [],
totalPages: '',
nextPage: &
浏览 0提问于2018-11-19得票数 0
我开始学习react，在调用多个ReactDOM.render函数时遇到问题： react： class Header extends React.Component{
render(){
return(
<div>
<p>Test1</p>
</div>
)
}
};
class Main extends React.Component {
render(){
return(
<section>
<p>Test2&l
浏览 18提问于2019-09-03得票数 0
回答已采纳
1回答
我正在开发一个简单的React web应用程序，但在查看从mock api中提取的某些数据时遇到问题：
下面是我的代码：
import React, { Component } from 'react';
class ApiTest extends Component {
constructor() {
super();
this.state = {
names: [],
};
}
componentDidMount() {
fetch('https://randomuser.me/a
浏览 0提问于2018-01-16得票数 2
回答已采纳
1回答
编辑:我添加了这个。
我是JSX的一个noobie，我试图(正确地)使用一个JSON图像文件构建一个图像网格。
做这件事的最佳或“正确”方法是什么？
我的JSON文件(根据的建议更新)：
{
"images": [
{
"url": "./images/temp/playlist_tn_01.jpg",
"className": "playlist-tn"
},
{
"url": "./images/temp/playlist_
浏览 1提问于2016-05-12得票数 1
回答已采纳
1回答
我有一个组件，它从API中提取图像。我正在尝试使用react-images从JSON创建一个映像库。我在组件中插入JSON，然后将图像数组设置为图库组件的支柱。
我的问题是，在图片库组件中，如何使用src 而不是 URL**.**将图像从道具传递给新的数组？
我相信我可以通过在状态中创建数组，然后将道具映射到状态来做到这一点，但我不太清楚如何做到这一点。
图像组件
import React, { Component } from "react";
import Gallery from "../Gallery";
const imageArray = [
浏览 3提问于2020-03-02得票数 0
回答已采纳
我在显示从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
回答已采纳
我在理解如何在MUI中对齐项目时遇到问题。我有以下代码： class SignUpForm extends React.Component {
render() {
return (
<Button sx={{ justifyContent: "flex-end" }}
color="inherit" }>Sign Up</Button>
)
}
} 它由以下部分组成： class Nav extends React.Componen
浏览 42提问于2021-10-13得票数 1
回答已采纳
1回答
我正在尝试将数据从我的状态加载到我的表单中，并且正在挣扎。
我登录并保存电子邮件和令牌到Redux状态。当我推到这个包含表单的测试页面时，我无法在表单中显示电子邮件。为什么我不能加载电子邮件？我可以在TestPage.js上看到，但在TestForm上看不到。
TestPage.js
import React from "react";
import PropTypes from 'prop-types';
import { connect } from "react-redux";
import TestForm from "../f
浏览 1提问于2018-05-04得票数 0
回答已采纳
我有一个非常简单的原生react屏幕，如下所示： class BasicScreen extends React.Component {
state = {
data: [],
myItems: [],
};
componentDidMount() {
this.checkforItems();
}
checkforItems = async () => {
AsyncStorage.getItem('MyItems').then(item => {
if (item) {
this.
浏览 75提问于2020-10-29得票数 0
回答已采纳
2回答
在使用for循环(res2.data.list)迭代JSON数组时遇到问题，获取三个数据点，并将它们放入一个新数组中。获取错误“预测不是fetchWeather的构造函数”。我将如何在功能组件中做到这一点？
const fetchWeather = async () => {
try {
await window.navigator.geolocation.getCurrentPosition(
savePositionToState
);
const res = await axios
浏览 2提问于2021-09-08得票数 1
回答已采纳
我正在尝试创建一个具有自动完成功能的textbox，该功能可以从API中提取建议，但在收到来自API的数组后更新状态时遇到问题。我在这里修改代码：https://blog.bitsrc.io/building-a-react-autocomplete-component-from-scratch-b78105324f4c 我认为我必须使用ComponentDidMount()，但是我不确定如何将它应用于onChange函数。 class App extends React.Component {
render() {
return (
浏览 15提问于2020-11-26得票数 0
我是React Native和Redux的新手，现在正在构建一个测验应用程序。 我想更新数组中的一项(名称)。有没有人可以告诉我下面的代码出了什么问题： export const setName = name => ({
type: "ADD_NAME",
id: 1,
name: name
});
INITIAL_STATE = [
{
id: 1,
question: "documentary",
answers: [
{ id: "1", text: "記録映画"
浏览 19提问于2020-02-01得票数 0
1回答
我是新来的反应-复仇者，正在做复古样本的工作。我能够在浏览器上正确地呈现视图。但是，当我试图启动一个动作事件时，我会得到以下错误消息：
调度不起作用
在浏览器的控制台中。
我不知道到底出了什么问题。我所有的源代码都在下面。
我怎么知道哪里出了问题？
index.js
const css = require('./assets/main.scss');
import {applyMiddleware, createStore} from 'redux';
import React from 'react';
import Reac
浏览 5提问于2017-10-30得票数 1
2回答
所以我使用一个API来获取一个对象数组，每个对象都有很多数据，我想过滤这些数据来获取我需要的数据，这样我就可以在React-Table上显示它了。
export default class Table extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
fetchData() {
const string = 'http://localhost:8000/issues/assigned/mike';
fetch(string
浏览 0提问于2018-05-04得票数 0
1回答
我正在尝试使用类型记录和反应来制作一个NPM包。(TSX)
我正在跟踪，但我试图制造多个组件，而不仅仅是一个组件。
当我尝试像这样导入我的模块时
import { HelloWorld } from 'tsx_lib'
它显示为未定义的
console.log(HelloWorld) //undefined
我的文件夹结构如下所示
src /
GoodbyeWorld.tsx
HelloWorld.tsx
index.ts
index.d.ts
这是文件
GoodbyeWorld.tsx
import * as React from 'react
浏览 0提问于2019-10-28得票数 1
回答已采纳
我有一个React组件和一个由图像url组成的JSON，我通过映射函数将图像url传递到组件中的图像标记中。
下面是我的代码示例：
import imgDetails from "../data/ImageDetails";
class Example extends Component {
constructor(props) {
super(props);
this.state = {
imgContentLoad: false
}
}
imageHandleLoad() {
this.setState({
浏览 9提问于2019-07-17得票数 0
回答已采纳
我想在我的App.js文件中集成redux mapStateToPros。为什么？因为当我的模态出现时，我需要触发一个模糊效果。因此，假设我有以下App.js import React, {Component} from 'react';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import {Provider} from 'react-redux';
import { PersistGate } from 'redux-per
浏览 17提问于2019-03-06得票数 0
我使用react-dropzone和cloudinary上传图片。 我已经成功地在我的账户和react项目之间建立了连接，我可以通过react项目上传图片了。 在react项目中设置文件名时遇到问题。 下面是我的react项目的代码片段。 我已经尝试过这样的东西： onImageDrop(files) {
console.log(files)
var test = JSON.parse(JSON.stringify(files))
test[0]["name"] = "test"
thi
浏览 16提问于2019-05-01得票数 3
我有这样的反应：
var GridTable = React.createClass({
render: function(){
var rows = [];
var headers = [];
this.props.movies.forEach(function(movie){
headers.push(<GridHeaders movie={movie} key={movie.id}/>);
rows.push(<GridRows movie={movie} key={
浏览 1提问于2016-08-03得票数 0
回答已采纳
2回答
我在映射来自Twitch API的注释/结果时遇到问题。当我尝试映射时，我得到了一个TypeError，并且从API中存储的结果最多有60条记录，我找不到一种方法来保持映射超过这个上限。
下面是我处理API调用和映射的组件...
import React from 'react';
import ReactDOM from 'react-dom';
class Twitch extends React.Component{
constructor(props){
super(props);
this.state = {
cid : '
浏览 2提问于2019-02-20得票数 0
1回答
我刚接触过Relay，我在GraphQL服务器上使用它时遇到了问题。
我已经将中继主页中的示例修改为SWAPI中继服务。我克隆了，并将cors添加到快速服务器中。我用以下代码测试了链接：
var query = `
{
allFilms {
edges {
node {
id
}
}
}
}
`
fetch("http://localhost:50515/graphiql?query=" + query)
.then(response=>response.json()
浏览 0提问于2016-10-18得票数 0
回答已采纳
32回答
我在react with routing中更改视图时遇到问题。我只想显示一个用户列表，单击每个用户应该导航到一个详细信息页面。这是路由器：
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import Users from "./components/Users";
import { Router, Route } from "react-router
浏览 13提问于2017-04-12得票数 118
我很难弄清楚我应该在哪里迭代，我应该在哪里有切换的逻辑。我有一个用来保存所有内容的App.js，一个用来构建列表项的listitem组件文件，而在切换中，我创建了一个状态函数，目前正在尝试迭代。我也对如何获取json数据感到困惑。我放弃了尝试从外部获取它，并将其加载到本地文件中。如何访问正确的值并将其放入我的列表中？ 我目前有这个，我可以显示一个电台的名称和频道。Here is my current card。和Here is my goal 链接，因为我不能发布图片 -- Here is app.js import React from 'react';
import Po
浏览 16提问于2019-06-20得票数 1
回答已采纳
我在访问通过路由传递到子组件的道具时遇到问题。我正在尝试获取应用程序页面中的身份验证功能，以便当我的登录页面中的onLogin函数获得正确响应时，我可以将其切换为true。任何帮助都将受到高度的感谢。
请找到下面的代码
//App.js
import React, { Component } from "react";
//import TopNavigation from './components/topNavigation';
//import { BrowserRouter, Route, Switch } from "react-route
浏览 3提问于2019-05-08得票数 0
2回答
我正在尝试从呈现数据。
我使用axios从API获取数据。当我收到数据时，我无法呈现映射(因为它显然是一个对象内部的数组)，因此它会抛出错误: TypeError: this.props.colors.map不是一个函数。我是否需要使用JSON.parse()，或者我能做什么？
//App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import Color from './components/Color';
import './
浏览 0提问于2019-03-30得票数 2
回答已采纳
我正在尝试获取静态JSON文件的内容并将其显示在react.js中。我的代码基于给定Here代码编译的示例，但当我在浏览器中打开页面时，我收到以下错误消息： TypeError: Cannot read property 'data' of null 下面是我的组件： import React, { Component } from 'react';
class UserList extends Component {
async getData(){
const res = await fetch('/stati
浏览 21提问于2020-12-01得票数 0
回答已采纳
1回答
在我的应用程序中添加视频时遇到问题，我已经安装了react-native-video，并通过react-native link链接到项目文件夹中
import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {Video} from 'react-native-video';
import LightVideo from "./big_buck_bunny.mp4"
export defaul
浏览 0提问于2018-05-22得票数 0
3回答
我有一个简单的代码不起作用。我把它从反应路由器项目页面，并稍加修改，以使它看起来更好。
设置
我有几个非常简单的反应组件：
var IndexPage = React.createClass({
render(){
return (<h1>Index Page</h1>);
}
});
var AboutPage = React.createClass({
render(){
return (<h1>About page</h1>);
}
});
var NotFoundPage =
浏览 0提问于2016-02-14得票数 2
回答已采纳
我不能迭代我从虚拟API get端点放入状态的项：
这是我的全部组成部分：
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class TaskList extends Component {
constructor() {
super();
this.state = {
tasks: [], // I set the empty state for now
}
}
浏览 2提问于2018-09-26得票数 0
回答已采纳
1回答
我在将我的HomePage(应用程序组件的子组件)组件连接到Redux store时遇到问题。在componentDidMount =>上，我尝试在文件的底部调用connect，并将从操作创建器文件导入的函数作为第二个参数传递，该函数将数据提取到后端，以便在React存储中设置数据。然而，我收到一个错误，说定义和导入的函数“不是一个函数”。我似乎不能通过我的componentDidMount电话。我也不能从这个组件访问存储。 我试着直接从我的组件中分派一个动作。我在调用的每个函数中都使用了调试器(尽管我没有通过ComponentDidMount。我还尝试使用withRouter来封装我
浏览 12提问于2019-09-19得票数 0
使用React，如何呈现一个内部嵌套了多个<div>的<div>？请参阅下面的代码。
var SubTrait = React.createClass({
render: function() {
var subTraits = this.props.data;
return (
<div className = "subTraitContainer">
<div>
{ subTraits.forEach(function(subTrait) {
ret
浏览 0提问于2015-11-12得票数 0
1回答
我在通过React路由器发送数据时遇到问题，我的数据来自Wordpress REST
首先是我的Nav函数，它是从Wordpress读取的，这是工作的。
<Link to={menus[ky].slug} params={{ pageId: menus[ky].post_name }}>{menus[ky].title}</Link>
接下来是我的应用程序功能，它使用MyRoutes函数，它动态地创建路由器，然后我有我的页面组成，我需要它来还原来自Nav的数据。
basicallY我想从Wordpress动态生成URL以保持SEO，然后从REST (尚未构建，仍然试图通
浏览 0提问于2020-12-07得票数 1
回答已采纳
我一直试图向第三方API发出一个简单的URL请求。这是我正在做的项目()。我一直在看丹·阿布拉莫夫( data )的视频，跟踪这个和这个，似乎遗漏了一些小的东西，因为日志显示我收到了来自API的数据，并发送给了还原程序，但是由于某种原因，状态没有被发送回组件。以下是代码摘要：
//app.tsx:从redux获取存储和使用提供程序
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import store from './redux/store/store'
浏览 3提问于2017-08-02得票数 0
回答已采纳
1回答
我在本机反应中使用redux得到以下错误
不变违反:无法在“连接(Lista)”上下文中找到“存储”。或者将根组件包装到连接选项中，或者将自定义的React提供程序和相应的React使用者传递给connect选项中的Connect(Lista)。
我的代码如下
SettingStore
import {createStore, applyMiddleware} from 'redux';
import Reducers from './Reducer'
import thunk from 'redux-thunk'
export def
浏览 0提问于2019-04-24得票数 0
在react应用程序(逐步汇编说明)上工作，向onClick播放一些电影。任何步骤都可以包含1到6部电影。无法将电影路径(源)映射到多个videojs播放器。 我想使用videojs在react组件中动态显示一些电影。我使用videojs中的example ( https://docs.videojs.com/tutorial-react.html )作为模板。在静态场景中，一切都运行得很好--独立的'videoJsOptions‘与事先已知的来源，以及独立的组件……当我试图在map或foreach中动态创建VideoPlayers时，在循环的每个步骤中创建const都会遇到问题。例
浏览 66提问于2018-12-30得票数 1
2回答
嗨，我是新来的，如果我错过了一些明显的事情，我会提前道歉。在使用map函数时，我在从json返回链接时遇到问题。我一直试图使用map函数返回json文件中数组中的几个链接，但我似乎做错了什么。我想通过数组“图像”，并获得每个链接，并打印在控制台(目前)。我稍后将使用它来显示图像)。下面是使用以下代码的结果:如果我执行file.images，它将返回以下内容：(我不知道为什么要打印两次)以下是我的代码
import React, { Component } from 'react';
// Project Detail Class
class ProjectDetail ex
浏览 2提问于2020-12-31得票数 0
回答已采纳
1回答
我有两个组件<App/>和<PitPage/>，它们都很相似，并且都使用了另一个组件<PitComponents/>。这两个组件都在React提供的<Provider/>下使用，并使用我创建的同一存储。注意，在分派事件时(在文件vanillaRedux.js中)，App.js中的<PitComponents uName="Badari Krishna" user={this.props.create.users[0].name}/>这一行会产生正确的答案输出"BK“，但我希望在PitPage.js中也会发生类
浏览 13提问于2019-02-28得票数 0
1回答
我正在尝试将一个值从一个文件传递到另一个文件。我在实现context.Cant时遇到问题，找出我在这里做错了什么！
import React from 'react'
const Mycontext = React.createContext();
class AppProvider extends React.Component {
constructor(props) {
super(props)
}
render() {
return (< Mycontext.Provider value = {"H
浏览 31提问于2018-08-31得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
