在类组件中循环json数据

Question

这是我尝试引用SampleApp 的索引.js

import React, { Component } from "react";
import { render } from "react-dom";
import './index.css';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Redirect
} from "react-router-dom";
import SampleApp from "./pages/SampleApp";
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
constructor() {
super();
this.state = {
name: "React",
isUserAuthenticated: true
};
}
render() {
return (
<Router>
<Switch>
<Route
exact
path="/"
render={() => {
return (
<Redirect to="/SampleApp" />
)
}}
/>
<Route exact path="/SampleApp" component={SampleApp} />
</Switch>
</Router>
);
}
}
render(<App />, document.getElementById("root"));

这是我的SampleApp.js文件。在这里，我从Cards.jsx导入Card组件

import React from 'react';
import '../../src/App.css';
import Cards from '../cards/cards';
const SampleApp = props => (

<React.Fragment>
<div className="App">
<div>
<div className="header">
<div className="header_fonts">
Sample Application
</div>
</div>
<div>
<div className="content_header_fonts">
This is sample app
</div>
<div className="content_fonts">
Sample app to deomntrate ideas.
</div>
<Cards></Cards>
</div>
</div>
</div>
</React.Fragment>

)
export default SampleApp;

这是我的Cards.jsx文件。这里我正在导入Card组件和json数据

import React, { Component } from "react";
import Card from './cardUI';
import CardData from '../source/data.json';
class Cards extends Component {
render() { 
return 
( 
<div className="container-fluid d-flex justify-content-center">
<div className="row">
{
CardData.map((
{title, desc, icon, intro,developer_guide,api_ref }, id) => 
(
<div className="col-md-4">
<Card 
title={title} 
desc={desc} 
intro={intro} 
developer_guide={developer_guide} 
api_ref={api_ref}/>
</div>
))
}

</div>
</div> 
);
}
}

export default Cards;

这是我的JSON文件的一个示例

[
{
"id" : 7,
"title" : "Melon Munchee",
"icon" : "https://cdn.onlinewebfonts.com/svg/img_393496.png",
"desc" : "If you are an Avatar fan, then this api is for you. Here you can find everything from Episodes to Characters.",
"intro": "intro_7",
"developer_guide": "d_link7",
"api_ref": "api_link7"
},
{
"id" : 8,
"title" : "Browns Barns",
"icon" : "https://cdn.onlinewebfonts.com/svg/img_386567.png",
"desc" : "Baseball fans? Computer nerds? Now, in one place, you have baseball data and an api to access it. Have fun!.",
"intro": "intro_8",
"developer_guide": "d_link8",
"api_ref": "api_link8"
}
]

Card.jsx文件这就是如何实现卡片组件

import React from 'react';
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import * as Icon from '../../node_modules/react-bootstrap-icons';
import './card-style.css';

const Card = props =>{
return(
<div className="card text-center">
<div className="card-body text-dark">
<Icon.Alarm></Icon.Alarm>
<h4 className="card-title">
{props.title}
</h4>
<p className="card-text text-secondary">
{props.desc}
</p>
<ul class="list-group">
<li class="list-group-item"><a href="#" className="card-link">{props.intro}</a></li>
<li class="list-group-item"><a href="#" className="card-link">{props.developer_guide}</a></li>
<li class="list-group-item"><a href="#" className="card-link">{props.api_ref}</a></li>
</ul>
</div>
</div>
)
}
export default Card;

但是我在跟踪时出错了

错误：卡(…(：渲染未返回任何内容。这通常表示缺少返回语句。或者，要不呈现任何内容，请返回null。19个堆叠框架倒塌。单元src/index.js:4441|}42|}43|

44|render(，document.getElementById("root"((；

Answer 1

我实际上要在这里进行猜测，并说您的特定错误是由return语句后的新行引起的。所以把它去掉，使它看起来像这个return (，它应该可以工作。。。或者至少这个错误应该消失。

查看此沙盒：https://codesandbox.io/s/xenodochial-fog-y8pk2?file=/src/App.js只需在返回后添加一行，即可查看您的确切错误。

Answer 2

这只是一个打字错误。当您在return语句旁边使用行终止符时，JS会自动添加分号，这将是函数执行的结束，并返回undefined。这就是为什么Cards组件找不到JSX的原因，因为Cards渲染返回undefined。

根据MDN文件。

return语句受自动分号插入(ASI(的影响。return关键字和表达式之间不允许使用行终止符。

要修复此问题，请使用此更新卡渲染功能

class Cards extends Component {
render() { 
return ( // was the issue earlier
<div className="container-fluid d-flex justify-content-center">
<div className="row">
{
CardData.map(({ title, desc, icon, intro,developer_guide,api_ref }, index) => (
<div className="col-md-4" key={title + index}>
<Card 
title={title} 
desc={desc} 
intro={intro} 
developer_guide={developer_guide} 
api_ref={api_ref} />
</div>
)
)
}
</div>
</div> 
);
}
}