React JS动态渲染内容未显示
我正在通过Json在组件中动态渲染内容。但是在“渲染内容”页面未显示之后。请帮助我...................... ................................................... ................................................... ................................................... ................................................... ................................................... ...................................
代码笔网址：https://codepen.io/dotnet345/pen/oNXBxBM
代码沙箱：https://codesandbox.io/s/gifted-thompson-t6pf8
import React, { PropTypes } from 'react';
class Dashboard extends React.Component {
constructor(props){
var files;
super(props);
this.state = {
selectedFile: null,
imagePreviewUrl: null,
Comment:'',
seen: false,
showlikePopup: false,
errors: {},
likebutton:true,
savebutton:true,
count:0,
clicked: false,
mypost:[]
}
this.onChangeComment = this.onChangeComment.bind(this);
this.changeColor = this.changeColor.bind(this);
}
onChangeComment(e) {
this.setState({ Comment: e.target.value })
}
togglePop = () => {
this.setState({
seen: !this.state.seen
});
};
togglePoplike = () => {
this.setState({
showlikePopup: !this.state.showlikePopup
});
};
fileChangedHandler = event => {
this.setState({
selectedFile: event.target.files[0]
})
var file = this.refs.file.files[0].name;
let reader = new FileReader();
reader.onloadend = () => {
this.setState({
imagePreviewUrl: reader.result
});
}
reader.readAsDataURL(event.target.files[0])
}
changeColor= () => {
this.setState({likebutton: !this.state.likebutton})
const clicked = this.state.clicked;
if(clicked){
this.setState({count: this.state.count - 1, clicked: false});
} else {
this.setState({count: this.state.count + 1, clicked: true})
}
}
viewPost= () =>{
this.props.history.push('/post')
}
changeColorsave= () => {
this.setState({savebutton: !this.state.savebutton})
}
handleValidation(){
let errors = {};
let formIsValid = true;
if (this.state.selectedFile == null) {
formIsValid = false;
errors["Comment"] = "*Please Select file";
}
if(this.state.Comment==""){
formIsValid = false;
errors["Comment"] = "*Please enter Caption";
}
this.setState({ errors: errors });
return formIsValid;
}
Submit = (e) => {
var fd = new FormData();
fd.append('file', this.state.selectedFile);
if(this.state.selectedFile!=null){
const obj = {
file:this.state.selectedFile.name,
Comment:this.state.Comment
}
}
if(this.handleValidation()){
}else{
}
e.preventDefault()
}
render() { var Json={
"AllPost":[
{
"User_Id":1,
"Username":"te",
"Records":[
{
"Profile":[{
"User_Id":"1",
"UserImage":"",
"Fullname":"Test",
"Username":"te"
}],
"Post":[{
"Post_Id":"1",
"UploadFile":"",
"Post_Caption":"Test",
"User_Id":"1"
}],
"likedetails":[{
"Post_Id":"1",
"LikeCount":"345"
}],
"commentdetails":[
{
"Comments":"testA",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testB",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testC",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testD",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testE",
"Username": "te",
"Comment_Date":"12-12-12"
}
]
}
]
},
{
"User_Id":2,
"Username":"te",
"Records":[
{
"Profile":[{
"User_Id":"2",
"UserImage":"",
"Fullname":"Test",
"Username":"te"
}],
"Post":[{
"Post_Id":"2",
"UploadFile":"",
"Post_Caption":"Test",
"User_Id":"2"
}],
"likedetails":[{
"Post_Id":"12",
"LikeCount":"3452"
}],
"commentdetails":[
{
"Comments":"testA",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testB",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testC",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testD",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testE",
"Username": "te",
"Comment_Date":"12-12-12"
}
]
}
]
},
{
"User_Id":3,
"Username":"te",
"Records":[
{
"Profile":[{
"User_Id":"3",
"UserImage":"",
"Fullname":"Test3",
"Username":"te3"
}],
"Post":[{
"Post_Id":"3",
"UploadFile":"",
"Post_Caption":"Test",
"User_Id":"3"
}],
"likedetails":[{
"Post_Id":"3",
"LikeCount":"345"
}],
"commentdetails":[
{
"Comments":"testA",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testB",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testC",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testD",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testE",
"Username": "te",
"Comment_Date":"12-12-12"
}
]
}
]
},
{
"User_Id":4,
"Username":"te",
"Records":[
{
"Profile":[{
"User_Id":"4",
"UserImage":"",
"Fullname":"Test4",
"Username":"te4"
}],
"Post":[{
"Post_Id":"4",
"UploadFile":"",
"Post_Caption":"Test4",
"User_Id":"4"
}],
"likedetails":[{
"Post_Id":"4",
"LikeCount":"3454"
}],
"commentdetails":[
{
"Comments":"testA",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testB",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testC",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testD",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testE",
"Username": "te",
"Comment_Date":"12-12-12"
}
]
}
]
},
{
"User_Id":5,
"Username":"te",
"Records":[
{
"Profile":[{
"User_Id":"5",
"UserImage":"",
"Fullname":"Test5",
"Username":"te5"
}],
"Post":[{
"Post_Id":"5",
"UploadFile":"",
"Post_Caption":"Test5",
"User_Id":"5"
}],
"likedetails":[{
"Post_Id":"5",
"LikeCount":"3455"
}],
"commentdetails":[
{
"Comments":"testA",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testB",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testC",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testD",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testE",
"Username": "te",
"Comment_Date":"12-12-12"
}
]
}
]
}
]
}
var follow ={
"AllFollow":[
{
"Records":[
{
"Followdetails":[
{
"User_Id":"1",
"UserImage":"",
"Fullname":"Test1",
"Username":"te1"
},
{
"User_Id":"2",
"UserImage":"",
"Fullname":"Test2",
"Username":"te2"
},
{
"User_Id":"3",
"UserImage":"",
"Fullname":"Test3",
"Username":"te3"
},
{
"User_Id":"4",
"UserImage":"",
"Fullname":"Test4",
"Username":"te4"
},
{
"User_Id":"5",
"UserImage":"",
"Fullname":"Test5",
"Username":"te5"
}
]
}
]
}
]
}
let btn_class = this.state.likebutton ? "spriteheartempty" : "spriteheartfill";
let btn_savclass = this.state.savebutton ? "spritesave" : "spritesaved";
let mypost=this.state.mypost;
let arr=[];
let $imagePreview = (<div className="previewText image-container">Please select an Image for Preview</div>);
if (this.state.imagePreviewUrl) {
$imagePreview = ( <div className="image-container" style={{ marginTop: '5px',padding: '5px'}} ><img src={this.state.imagePreviewUrl} alt="icon" width="200" /> </div>)
}
return (
<div id="react-root">
<Helmet>
<meta charSet="utf-8" />
<title>Dashboard • Instagram</title>
<link rel="icon" href="/insta.ico" />
</Helmet>
<section className="post_section_flex post_section">
<Header/>
<div></div>
<main className="post_main post_main1" role="main">
<section className="post_section_left_flex post_section_left">
{
Json.AllPost.map((user) => {
{
if(user.Records!=undefined)
{
user.Records.map(record =>{
return (
<div className="post_section_outer">
<div>
<div style= {{flexdirection: 'column', paddingbottom: '6553px', paddingtop: '0px'}}>
<article className="_8Rm4L M9sTE L_LMM SgTZ1 ePUX4">
{
record.Post.map(post =>{
return (
<header className="post_section_header_flex post_section_header ">
<div className="post_section_header_icon_flex post_section_header_icon" role="button" tabIndex="0">
<canvas className="cnvas" height="42" width="42" style={{position: 'absolute', top: '-5px', left: '-5px', width: '42px', height: '42px'}}></canvas>
<span className="post_section_header_span " role="link" tabIndex="0" style={{width: '32px', height: '32px'}}>
<img alt="followindiancricket's profile picture" className="post_section_header_image" src="https://scontent-maa2-1.cdninstagram.com/v/t51.2885-19/s150x150/72440940_1149583128547207_8378383594128670720_n.jpg?_nc_ht=scontent-maa2-1.cdninstagram.com&_nc_ohc=SLnG-HyjbUsAX-gpA24&oh=70276049b5204ca4361b9af8e5609e03&oe=5ED53A34"/>
</span>
</div>
<div className="post_section_header_content_flex post_section_header_content">
<div className="post_section_header_content1">
<div className="post_section_header_content2">
<h2 className="post_section_header_content3">
<a href="/follow" className="post_section_header_a_flex post_section_header_a">
{user.Username}
Test</a>
</h2>
</div>
</div>
</div>
</header>
);
})
}
<div className="">
<div className="post_section_body_outer" role="button" tabIndex="0">
<div className="post_section_body_outer1">
<div className="post_section_body_outer2" style={{paddingbottom: '56.1333%'}}>
<img alt="" className="post_section_body_img" decoding="auto" sizes="614px" style={{objectfit: 'cover'}} src="https://scontent-maa2-1.cdninstagram.com/v/t51.2885-15/e35/83308853_1028085250883216_7625513747424223693_n.jpg?_nc_ht=scontent-maa2-1.cdninstagram.com&_nc_cat=108&_nc_ohc=c5a_p6bAp4EAX9N8U0L&oh=039d39990a00df5addab5426a98c4ad7&oe=5ECC6722" />
</div>
<div className="post_section_body_outer3"></div>
</div>
</div>
</div>
<div className="post_section_comment">
<section className="post_section_comment_like_count_val_flex post_section_comment_like_count_val">
<div className="post_section_comment_like_count_flex_outer">
<button className="post_section_comment_like_count_flex post_section_comment_like_count1" type="button" onClick={this.togglePoplike}>
<span>{this.state.count}</span> likes
</button>
{this.state.showlikePopup ? <Popuplike toggle={this.togglePoplike} /> : null}
</div>
</section>
<div className=" Igw0E IwRSH eGOV_ _4EzTm XfCBB ">
{
record.Post.map(post =>{
return (
<div className=" Igw0E IwRSH eGOV_ _4EzTm pjcA_ ">
<div className=" QzzMF Igw0E IwRSH eGOV_ vwCYk ">
<a className="FPmhX notranslate MBL3Z" href="">
{user.Username}
Follow</a>
<span>
<span>
{post.Post_Caption}
Test</span>
</span>
</div>
</div>
);
})
}
{
record.commentdetails.forEach(comment => {
return (
<div>
<div className=" Igw0E IwRSH eGOV_ _4EzTm pjcA_ ">
<a className="r8ZrO" href =""></a>
</div>
<div className=" Igw0E rBNOH eGOV_ ybXk5 _4EzTm pjcA_ ">
<div className=" QzzMF Igw0E IwRSH eGOV_ vwCYk ">
<a className="FPmhX notranslate MBL3Z" href="">
{comment.Username}
Follow</a>
<span>
<span>
{comment.Comments}
Test</span>
</span>
</div>
</div>
</div>
);
})
}
</div>
<section className="post_section_comment_text_outer">
<div>
<form className="post_section_comment_text_form" >
<textarea aria-label="Add a comment…" placeholder="Add a comment…" className="post_section_comment_text_box" autoComplete="off" onChange={this.onChangeComment} autoCorrect="off" value={this.state.Comment} style={{height: '18px'}}></textarea>
<button className="sqdOP yWX7d y3zKF " type="submit" disabled={!this.state.Comment}>Post</button>
</form>
</div>
</section>
</div>
<div className="post_section_header_button">
<button className="post_section_header_button_flex" type="button" onClick={this.togglePop}>
{this.state.seen ? <Popup toggle={this.togglePop} /> : null}
<div className="post_section_header_button_flex1" style={{height: '24px', width: '24px'}}>
<svg aria-label="More options" className="_8-yf5 " fill="#262626" height="16" viewBox="0 0 48 48" width="16">
<circle clipRule="evenodd" cx="8" cy="24" fillRule="evenodd" r="4.5"></circle>
<circle clipRule="evenodd" cx="24" cy="24" fillRule="evenodd" r="4.5"></circle>
<circle clipRule="evenodd" cx="40" cy="24" fillRule="evenodd" r="4.5"></circle>
</svg>
</div>
</button>
</div>
</article>
</div>
</div>
</div>
);
})
}
} })}
<div className="post_section_space">
</div>
<div className="post_section_right">
<div className="post_section_right_top">
<div className="post_section_right_top1">
<div className="post_section_right_button" role="button" tabIndex="0">
<canvas className="CfWVH" height="60" width="60" style={{position: 'absolute', top: '-5px', left: '-5px', width: '60px', height: '60px'}}></canvas>
<a className="_2dbep qNELH kIKUG" href="/profile" style={{width: '50px', height: '50px'}}><img alt=" profile picture" className="_6q-tv" src="https://scontent-maa2-1.cdninstagram.com/v/t51.2885-19/s150x150/13551647_1103951302984701_819335256_a.jpg?_nc_ht=scontent-maa2-1.cdninstagram.com&_nc_ohc=kNncCEMGknkAX8E7LX5&oh=d114e3d1b4374efab3aa4f8686ad3ebe&oe=5EC67023"/></a>
</div>
<div className="post_section_right_prof">
<div className="post_section_right_prof1">
<a className="post_section_right_lin" href="/profile"></a>
</div>
<div className="post_section_right_name">
</div>
</div>
</div>
</div>
<div className="post_section_right_suggest_flex post_section_right_suggest_outer">
<span style={{padding: '5px', textAlign: 'center'}}><h1>Post File</h1></span><br></br>
<div className="post_section_right_suggest_flex1 post_section_right_suggest_outer1">
<form>
<input ref="file" type="file" name="user[image]" onChange={this.fileChangedHandler} style={{padding: '5px', marginLeft: '31px'}} />
{$imagePreview}
<textarea className="p7vTm" id="pepBio" placeholder="Enter Text here" value={this.state.Comment} onChange={this.onChangeComment}></textarea>
<span style={{ color: "red" }}>{this.state.errors["Comment"]}</span>
<div className="signin_form_button">
<input type="submit" value="Upload" onClick={this.Submit} className="signin_form_buttonstyle" />
</div>
</form>
</div>
</div>
})
})
}
</div>
</div>
</section>
</main>
</section>
<Footer/>
</div>
)
}
}
export default Dashboard;
2 个答案:
答案 0 :(得分：0)
根据您拥有的代码
class Dashboard extends React.Component {
}
render() { var Json={
您创建了类组件并立即将其关闭 所以您的渲染功能不是组件的一部分
您可以尝试在{}内移动渲染吗？
您还应该删除一个封闭的div，因为封闭标签存在问题
</div>
</div> --- THIS ONE
{/* </div> */}
</section>
</main>
</section>
答案 1 :(得分：0)
{Json.AllPost.map(user => {
return (
user.Records != undefined?
user.Records.map(record => {
return (
<div className="post_section_outer">
<div>
<div
style={{
flexdirection: "column",
paddingbottom: "6553px",
paddingtop: "0px"
}}
>
<article className="_8Rm4L M9sTE L_LMM SgTZ1 ePUX4">
{record.Post.map(post => {
return (
<header className="post_section_header_flex post_section_header ">
<div
className="post_section_header_icon_flex post_section_header_icon"
role="button"
tabIndex="0"
>
<canvas
className="cnvas"
height="42"
width="42"
style={{
position: "absolute",
top: "-5px",
left: "-5px",
width: "42px",
height: "42px"
}}
/>
<span
className="post_section_header_span "
role="link"
tabIndex="0"
style={{
width: "32px",
height: "32px"
}}
>
<img
alt="followindiancricket's profile picture"
className="post_section_header_image"
src="https://scontent-maa2-1.cdninstagram.com/v/t51.2885-19/s150x150/72440940_1149583128547207_8378383594128670720_n.jpg?_nc_ht=scontent-maa2-1.cdninstagram.com&_nc_ohc=SLnG-HyjbUsAX-gpA24&oh=70276049b5204ca4361b9af8e5609e03&oe=5ED53A34"
/>
</span>
</div>
<div className="post_section_header_content_flex post_section_header_content">
<div className="post_section_header_content1">
<div className="post_section_header_content2">
<h2 className="post_section_header_content3">
<a
href="/follow"
className="post_section_header_a_flex post_section_header_a"
>
{user.Username}
Test
</a>
</h2>
</div>
</div>
</div>
</header>
);
})}
<div className="">
<div
className="post_section_body_outer"
role="button"
tabIndex="0"
>
<div className="post_section_body_outer1">
<div
className="post_section_body_outer2"
style={{ paddingbottom: "56.1333%" }}
>
<img
alt=""
className="post_section_body_img"
decoding="auto"
sizes="614px"
style={{ objectfit: "cover" }}
src="https://scontent-maa2-1.cdninstagram.com/v/t51.2885-15/e35/83308853_1028085250883216_7625513747424223693_n.jpg?_nc_ht=scontent-maa2-1.cdninstagram.com&_nc_cat=108&_nc_ohc=c5a_p6bAp4EAX9N8U0L&oh=039d39990a00df5addab5426a98c4ad7&oe=5ECC6722"
/>
</div>
<div className="post_section_body_outer3" />
</div>
</div>
</div>
<div className="post_section_comment">
<section className="post_section_comment_icon post_section_comment_val">
<span className="post_section_comment_span">
<button
style={{
alignitems: "center",
border: "0"
}}
className={btn_class}
type="button"
onClick={this.changeColor}
/>
</span>
<span className="post_section_comment_span1">
<button
className="post_section_comment_button_like"
type="button"
onClick={this.viewPost}
>
<svg
aria-label="Comment"
className="_8-yf5 "
fill="#262626"
height="24"
viewBox="0 0 48 48"
width="24"
>
<path
clipRule="evenodd"
d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 3.5 24 3.5 44.5 12.7 44.5 24z"
fillRule="evenodd"
/>
</svg>
</button>
</span>
<button
className="post_section_comment_button_like"
type="button"
>
<svg
aria-label="Share Post"
className="_8-yf5 "
fill="#262626"
height="24"
viewBox="0 0 48 48"
width="24"
>
<path d="M46.5 3.5h-45C.6 3.5.2 4.6.8 5.2l16 15.8 5.5 22.8c.2.9 1.4 1 1.8.3L47.4 5c.4-.7-.1-1.5-.9-1.5zm-40.1 3h33.5L19.1 18c-.4.2-.9.1-1.2-.2L6.4 6.5zm17.7 31.8l-4-16.6c-.1-.4.1-.9.5-1.1L41.5 9 24.1 38.3z" />
<path d="M14.7 48.4l2.9-.7" />
</svg>
</button>
<span className="post_section_comment_save">
<button
className="post_section_comment_button_like"
type="button"
style={{
alignitems: "center",
border: "0"
}}
className={btn_savclass}
onClick={this.changeColorsave}
/>
</span>
</section>
<section className="post_section_comment_like_count_val_flex post_section_comment_like_count_val">
<div className="post_section_comment_like_count_flex_outer">
<button
className="post_section_comment_like_count_flex post_section_comment_like_count1"
type="button"
onClick={this.togglePoplike}
>
<span>{this.state.count}</span> likes
</button>
{this.state.showlikePopup ? (
<Popuplike
toggle={this.togglePoplike}
/>
) : null}
</div>
</section>
<div className=" Igw0E IwRSH eGOV_ _4EzTm XfCBB ">
{record.Post.map(post => {
return (
<div className=" Igw0E IwRSH eGOV_ _4EzTm pjcA_ ">
<div className=" QzzMF Igw0E IwRSH eGOV_ vwCYk ">
<a
className="FPmhX notranslate MBL3Z"
href=""
>
{user.Username}
Follow
</a>
<span>
<span>
{post.Post_Caption}
Test
</span>
</span>
</div>
</div>
);
})}
{record.commentdetails.forEach(comment => {
return (
<div>
<div className=" Igw0E IwRSH eGOV_ _4EzTm pjcA_ ">
<a className="r8ZrO" href="" />
</div>
<div className=" Igw0E rBNOH eGOV_ ybXk5 _4EzTm pjcA_ ">
<div className=" QzzMF Igw0E IwRSH eGOV_ vwCYk ">
<a
className="FPmhX notranslate MBL3Z"
href=""
>
{comment.Username}
Follow
</a>
<span>
<span>
{comment.Comments}
Test
</span>
</span>
</div>
</div>
</div>
);
})}
</div>
<section className="post_section_comment_text_outer">
<div>
<form className="post_section_comment_text_form">
<textarea
aria-label="Add a comment…"
placeholder="Add a comment…"
className="post_section_comment_text_box"
autoComplete="off"
onChange={this.onChangeComment}
autoCorrect="off"
value={this.state.Comment}
style={{ height: "18px" }}
/>
<button
className="sqdOP yWX7d y3zKF "
type="submit"
disabled={!this.state.Comment}
>
Post
</button>
</form>
</div>
</section>
</div>
<div className="post_section_header_button">
<button
className="post_section_header_button_flex"
type="button"
onClick={this.togglePop}
>
{this.state.seen ? (
<Popup toggle={this.togglePop} />
) : null}
<div
className="post_section_header_button_flex1"
style={{ height: "24px", width: "24px" }}
>
<svg
aria-label="More options"
className="_8-yf5 "
fill="#262626"
height="16"
viewBox="0 0 48 48"
width="16"
>
<circle
clipRule="evenodd"
cx="8"
cy="24"
fillRule="evenodd"
r="4.5"
/>
<circle
clipRule="evenodd"
cx="24"
cy="24"
fillRule="evenodd"
r="4.5"
/>
<circle
clipRule="evenodd"
cx="40"
cy="24"
fillRule="evenodd"
r="4.5"
/>
</svg>
</div>
</button>
</div>
</article>
</div>
</div>
</div>
);
})
:null
)
})}
问题出在第一张地图中，您没有返回任何内容，我将if条件修改为三元
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？