我的React JSX似乎无法渲染数组字符串。我已经尝试了console.log并且它正确地记录了它，但是当我尝试将它添加到JSX时就像第19行一样，它不会在数组中呈现文本。
import React, { Component } from 'react';
import './App.css';
import './bootstrap.min.css';
//Fake Data
var PostDescription = ['Liquorice pudding chupa chups liquorice biscuit cake. Apple pie wafer danish gummies oat cake. Chupa chups lollipop gummies sugar plum wafer. Oat cake macaroon pudding jelly-o pie gummi bears caramels. Muffin marzipan oat cake chupa chups sweet. Sweet roll soufflé donut toffee. Tart halvah soufflé muffin brownie wafer marshmallow chocolate cake.', 'Sugar plum tart sugar plum croissant apple pie icing. Jujubes toffee toffee jelly tootsie roll. Lollipop bear claw sugar plum cake. Chocolate cake jelly sesame snaps. Jelly beans bear claw dessert. Cupcake danish tiramisu.', 'Marzipan sweet carrot cake pastry cake sesame snaps candy canes apple pie jelly. Lemon drops ice cream gummies chupa chups jelly-o gummies chupa chups. Croissant candy cheesecake. Gingerbread chocolate bar soufflé cotton candy. Marshmallow jelly beans oat cake. Liquorice candy tiramisu cupcake chocolate bar topping. Liquorice apple pie halvah jelly-o cake brownie. Pastry powder tiramisu jelly-o. Tiramisu brownie oat cake icing icing cotton candy. Caramels oat cake ice cream donut bear claw candy chocolate bar biscuit. Caramels pie soufflé dessert chocolate sesame snaps. Pastry sweet sweet marshmallow chocolate cake tart cake muffin. Marshmallow lollipop caramels jelly-o macaroon caramels gingerbread chupa chups cake.', 'Marzipan sweet carrot cake pastry cake sesame snaps candy canes apple pie jelly. Lemon drops ice cream gummies chupa chups jelly-o gummies chupa chups. Croissant candy cheesecake. Gingerbread chocolate bar soufflé cotton candy. Marshmallow jelly beans oat cake. Liquorice candy tiramisu cupcake chocolate bar topping. Liquorice apple pie halvah jelly-o cake brownie. Pastry powder tiramisu jelly-o. Tiramisu brownie oat cake icing icing cotton candy. Caramels oat cake ice cream donut bear claw candy chocolate bar biscuit. Caramels pie soufflé dessert chocolate sesame snaps. Pastry sweet sweet marshmallow chocolate cake tart cake muffin. Marshmallow lollipop caramels jelly-o macaroon caramels gingerbread chupa chups cake.', 'Bacon ipsum dolor amet ham shoulder spare ribs brisket short ribs kielbasa fatback pork chop cupim short loin shank. Rump pancetta pork flank pork loin leberkas shankle bresaola. Bacon prosciutto pastrami jerky filet mignon, ground round tenderloin. Tri-tip andouille kielbasa ball tip. Andouille filet mignon swine ham hock drumstick jerky strip steak pork loin cow prosciutto.', 'Landjaeger tri-tip andouille beef ribs boudin. Burgdoggen tenderloin swine kevin filet mignon picanha shank spare ribs turducken beef ribs boudin ribeye ham short ribs. Ribeye bacon shankle hamburger filet mignon porchetta. Beef strip steak cupim, bresaola doner chicken burgdoggen meatball pork. Burgdoggen alcatra flank drumstick pork loin chicken, cupim pastrami jowl fatback ribeye.', 'Ball tip landjaeger ham hock chicken rump ham sirloin cow fatback beef ribs pork loin porchetta drumstick spare ribs cupim. Burgdoggen shankle tri-tip kevin, ham hock ground round andouille ribeye. Porchetta t-bone strip steak tail buffalo frankfurter tenderloin hamburger meatloaf shankle capicola turducken chicken spare ribs. Meatloaf strip steak kielbasa tenderloin, brisket picanha flank andouille turkey spare ribs. Filet mignon landjaeger sausage, ham hock burgdoggen tri-tip meatloaf bresaola.', 'Typewriter pabst narwhal thundercats normcore hammock fanny pack slow-carb seitan direct trade, keytar retro aesthetic cardigan hella. Hashtag drinking vinegar YOLO waistcoat kombucha migas meditation man braid green juice cornhole. Aesthetic 8-bit hoodie, meh iPhone pop-up waistcoat. Chillwave try-hard cred lumbersexual woke. Live-edge gluten-free coloring book sartorial salvia pop-up, fanny pack art party drinking vinegar iPhone blue bottle roof party. Tattooed poutine williamsburg, shoreditch occupy godard pabst synth bespoke quinoa ramps.', 'Typewriter pabst narwhal thundercats normcore hammock fanny pack slow-carb seitan direct trade, keytar retro aesthetic cardigan hella. Hashtag drinking vinegar YOLO waistcoat kombucha migas meditation man braid green juice cornhole. Aesthetic 8-bit hoodie, meh iPhone pop-up waistcoat. Chillwave try-hard cred lumbersexual woke. Live-edge gluten-free coloring book sartorial salvia pop-up, fanny pack art party drinking vinegar iPhone blue bottle roof party. Tattooed poutine williamsburg, shoreditch occupy godard pabst synth bespoke quinoa ramps.', 'Lorem ipsum dolor amet xOXO health goth offal lomo lo-fi. Mlkshk leggings trust fund vape. Marfa photo booth taiyaki ethical. La croix whatever street art schlitz man bun kitsch offal keffiyeh poutine occupy migas.', 'Chartreuse sriracha hell of, freegan sartorial biodiesel craft beer everyday carry. Neutra wayfarers put a bird on it man bun craft beer poke art party live-edge selfies. Tacos sriracha yuccie church-key kinfolk asymmetrical. Knausgaard chillwave pork belly retro PBR&B. Glossier kale chips cold-pressed vegan, hell of +1 tbh normcore 3 wolf moon PBR&B locavore palo santo vexillologist disrupt. Austin yr PBR&B banjo brooklyn crucifix. Humblebrag XOXO readymade polaroid waistcoat biodiesel.']
var PostTitle = ['Tastasticular Burgerland', 'Donutation', 'Caketastic', 'Pienation', '']
var PostIndex = 0
class FeedCard extends Component {
render() {
for (var post = 0; post < 11; post++) {
PostDescription.push(<span key={post}></span>);
PostIndex++
}
return (
<div className="card custom-feed-card">
<div className="card-body">
<h5 className="card-title">{PostTitle[PostIndex]}</h5>
<h6 className="card-subtitle text-muted mb-2">Bacon Ave</h6>
<p className="card-text">{PostDescription[PostIndex]}</p>
<a href="#" className="btn btn-outline-info">Find Out More</a>
</div>
</div>
);
}
}
答案 0 :(得分：0)
PostIndex将始终为10，因为return (...JSX...) 你的for循环。
render() {
var posts = [];
for (var post = 0; post < 11; post++) {
posts.push(
<div className="card custom-feed-card" key={post}>
<div className="card-body">
<h5 className="card-title">{PostTitle[post]}</h5>
<h6 className="card-subtitle text-muted mb-2">Bacon Ave</h6>
<p className="card-text">{PostDescription[post]}</p>
<a href="#" className="btn btn-outline-info">Find Out More</a>
</div>
</div>
)
}
return (
<div>{posts}</div>
);
}
答案 1 :(得分：0)
您应该考虑将数据放入父元素，并且尽可能使用无状态组件。另外，请查看将postTitle与postDescription相关联。这是一个例子：
1st允许实现partent组件：
import React, { Component } from 'react';
import FeedCard from './FeedCard';
let postData = [{
title: 'Hello',
description: 'Liquorice pudding chupa chups liquorice biscuit cake.'
},{
title: 'Hello',
description: 'Liquorice pudding chupa chups liquorice biscuit cake.'
},{
title: 'Hello',
description: 'Liquorice pudding chupa chups liquorice biscuit cake.'
}]
class Feed extends Component {
render(){
<div>
{postData.map(post => <FeedCard title={post.title} description={post.description} >)}
</div>
}
}
请注意，我们已导入另一个无状态组件。接下来我们将创建此组件：
export const FeedCard = ({title, description}) => {(
<div className="card custom-feed-card">
<div className="card-body">
<h5 className="card-title">{title}</h5>
<h6 className="card-subtitle text-muted mb-2">Bacon Ave</h6>
<p className="card-text">{description}</p>
<a href="#" className="btn btn-outline-info">Find Out More</a>
</div>
</div>
)}
这应该让您了解如何更好地创建可重用的无状态组件，这是使用react的最强大的功能之一。