سلام دوستان وقتتون بخیر
من کدی با ری اکت نوشتم که با axios دیتای api رو call میکنم ولی در رندر وقتی روی آرایه ای که بدست آوردم map میذارم دیتاها رو بهم نشون نمیده فکر میکنم دلیلش این باشه که در componentdidmount، دیتا رو call میکنم و چون ممکنه callback اش طول بکشه در رندر نمایش نمیده. شما راه حلی برای این مسئله دارید؟
import React, { Component } from 'react';
import style from '../src/index.css';
import axios from 'axios';
export default class App extends Component {
constructor() {
super();
this.state = {
displayList: []
}
}
componentDidMount() {
axios.get(`http://karmento.ir/api/v2/getProjectList`)
.then(res => {
const data = res.data;
this.setState({
displayList: data
})
})
}
render() {
const displayList = [...this.state.displayList];
return (
<div>
{displayList.length !== 0 && <div className="content">
{displayList.map(item => {
<div>
<article style={{ flexGrow: 7 }}>
<div className="account-info">
<img src="./public/image/profile.jpg" alt="profile" />
<h1>{item.diffTime}</h1>
</div>
</article>
<article style={{ flexGrow: 5 }}>
<div className="description">
<p>{item.user.name + '' + item.user.family}</p>
<p>{item.title}</p>
<p>{item.description}</p>
</div>
</article>
<article style={{ flexGrow: 2 }}>
<div className="suggestion">
<img src="./public/image/eye.png" />
<p className="suggestion-border">{item.viewCount}</p>
<img src="./public/image/eye.png" className="img-second" />
<p>{item.user.isAdviser}</p>
<p className="suggest">پیشنهاد</p>
</div>
</article>
<article style={{ flexGrow: 2 }}>
<div className="details">
<p>عادی</p>
<img src="./public/image/icon2.png" />
</div>
<a className="detail-button">جزئیات</a>
</article>
</div>
})
}
</div>
}
</div>
)
}
}
@neda.haghgoo
1 - پارامتر props رو به constractor() و متد super() پاس نداده بودین
2- همیشه پاسخ api رو لاگ بگیرید تا بفهمید اطلاعات مورد نیاز کجاست مثلا اینجا یه data کم زدید و درستش res.data.data هست.
3 - نحوه گرفتن displayList از state ها در متد رندر به این شکله
const {displayList} = this.state;
4 - displayList.length !== 0 && <div className="content"> منظورتون از این احتمالا inline if هست که فرمت درستش اینه
displayList.length > 0 ?isTrue:isFalse
5 - درکل
import React, {Component} from 'react';
import style from '../src/index.css';
import axios from 'axios';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
displayList: []
}
}
componentDidMount() {
axios.get(`http://karmento.ir/api/v2/getProjectList`)
.then(res => {
console.log(res);
const data=res.data.data;
this.setState({
displayList: data
})
}).catch(error => {
console.log(error);
})
}
render() {
const {displayList} = this.state;
return (
<div>
{
displayList.length > 0 ?
displayList.map((item,index) =>
<div key={index}>
<article style={{ flexGrow: 7 }}>
<div className="account-info">
<img src="./public/image/profile.jpg" alt="profile" />
<h1>{item.diffTime}</h1>
</div>
</article>
<article style={{ flexGrow: 5 }}>
<div className="description">
<p>{item.user.name + '' + item.user.family}</p>
<p>{item.title}</p>
<p>{item.description}</p>
</div>
</article>
<article style={{ flexGrow: 2 }}>
<div className="suggestion">
<img src="./public/image/eye.png" />
<p className="suggestion-border">{item.viewCount}</p>
<img src="./public/image/eye.png" className="img-second" />
<p>{item.user.isAdviser}</p>
<p className="suggest">پیشنهاد</p>
</div>
</article>
<article style={{ flexGrow: 2 }}>
<div className="details">
<p>عادی</p>
<img src="./public/image/icon2.png" />
</div>
<a className="detail-button">جزئیات</a>
</article>
</div>
)
:
null
}
</div>
)
}
}
@hamidrezayas67
خیلی ممنون از راهنمائیتون،
من الان از displayList، console.log میگیرم نمایش میده ولی تو صفحه نشونش نمیده استایلی هم که دادم به این شکله:
return (
<div className="content-style">
{displayList.map(item => {
<div className="content">
<article style={{ flexGrow: 7 }}>
<div className="account-info">
<img src="./public/image/profile.jpg" alt="profile" />
<h1>{item.diffTime}</h1>
</div>
</article>
<article style={{ flexGrow: 5 }}>
<div className="description">
<p>{item.user.name + '' + item.user.family}</p>
<p>{item.title}</p>
<p>{item.description}</p>
</div>
</article>
<article style={{ flexGrow: 2 }}>
<div className="suggestion">
<img src="./public/image/eye.png" />
<p className="suggestion-border">{item.viewCount}</p>
<img src="./public/image/eye.png" className="img-second" />
<p>{item.user.isAdviser}</p>
<p className="suggest">پیشنهاد</p>
</div>
</article>
<article style={{ flexGrow: 2 }}>
<div className="details">
<p>عادی</p>
<img src="./public/image/icon2.png" />
</div>
<a className="detail-button">جزئیات</a>
</article>
</div>
})
}
</div>
)
}
style.css:
.container{
width:80%;
margin:0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 7.5em 0;
text-align: right;
direction: rtl;
}
.content{
float: right;
height: 220px;
display: flex;
padding:0 3em;
}
.menu{
width: 16%;
height: 600px;
}
.profile{
background-color: #395662;
}
.profile img{
width: ***;
height: ***;
border-radius: 50%;
margin:0 auto;
padding:2em 3em 0em;
}
.profile h1{
padding: 0 1em 2em;
margin:0;
font-size: 1.3rem;
text-align: center;
}
nav ul{
margin:0;
padding: 0;
font-size: 1.2rem;
font-weight: 600;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color:#7C7D80;
text-align: right;
list-style-type: none;
border:1px solid #C5C5C6;
}
nav ul li{
padding:0.*** 0.8em;
}
.account-info{
margin:0 auto;
text-align: center;
padding: 1em 0;
}
.account-info img{
width: 5.3em;
height: 5.3em;
}
.account-info h1{
font-size: 1rem;
font-weight: 500;
text-align: center;
margin:0;
}
.suggestion{
display: flex;
height: ***;
align-items: center;
text-align: center;
margin:0 auto;
padding:0 1em;
}
.suggestion img{
width: 2em;
height:1em;
}
.description{
padding: 1em;
font-size: 1.1rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.suggestion-border{
width: 1.5em;
height: 2em;
border-left: 2px solid #999A97;
margin-top: 1.8em;
text-align: right;
padding-top: 0.4em;
}
.img-second{
margin-right: 1em;
}
.suggest{
padding-right: 0.5em;
font-size: 1.2rem;
font-weight: 500;
font-family: Arial, Helvetica, sans-serif;
}
.details{
display: flex;
justify-content: space-between;
align-items:center;
margin:0 auto;
padding:1em 1em 1.2em 0em;
}
.details img{
width: 2em;
height: 2.4em;
}
.details p{
font-size: 1.2rem;
font-weight: 500;
padding-top:0.5em;
}
.detail-button{
border:3px solid #1F3B4D;
color: #38576C;
font-size: 1.3rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding:0 1.4em 0.3em;
margin:0.4em 1.2em 0 0;
border-radius: 0.3em;
}
header{
width:91%;
margin:0 auto;
display: flex;
padding:0 1.2em 0.3em;
font-size: 2.1rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 1.8em;
border-bottom: 3px solid #38576C;
border-bottom-width: 80%;
}
header h1{
flex-grow: 1.3;
flex-direction: column;
font-size: 1.4rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 500;
padding-bottom: 0.8em;
margin:0;
}
.filter{
display: flex;
align-self: baseline;
}
.filter h1,img,p{
padding-left:0.7em;
}
.filter img{
width: 0.***;
height: 0.***;
align-self: center;
opacity: 0.3;
}
.filter p{
font-size: 0.8rem;
}
.filter h1{
font-size: 1.2rem;
font-weight: 200;
color:#555AE1;
padding-top:0.4em;
}
.main{
border: 1px solid #C5C5C6;
width: 81%;
padding: 2em 0.5em;
}
.search{
height:2.7em;
margin:15px;
border-top:1px solid #DBDEE4;
border-radius: 0.3em;
background-color:#E6E8EC;
}
.search p{
text-align: center;
color:#9EA0A5;
font-size: 1.5rem;
padding-top:0.2em;
margin:0;
}
.content-style{
width:100%;
height:auto;
}
یعنی دیتا هست ولی در قالب html نمایش نمیده. css ها رو هم میشناسه. ممنون میشم راهنمائی بفرمائید
@neda.haghgoo
من ری اکت کار نکردم، نمی دونم درست، ولی چیزی که الان به چشمم میادش توی این کد اینه که مقادیری که داخل return قرار دادید عجیب غریبه.
اونچه که من هنگام نوشتن کدهای html داخل جاوااسکریپت رعایت می کنم اینه که کدها html رو بصورت رشته قرار میدیم و متغیرها رو هم با $ داخلش می نویسیم.
در مرحله ی اول هم، از گرفتن اطلاعات اولیه از api مربوطه اطمینان حاصل کنید.
من کد زیر رو نوشتم، تابع console.log این اطمینان رو میده که داده ها به درستی دریافت میشند.
const getDrinksByName = async() => {
try {
const url = await fetch(`http://karmento.ir/api/v2/getProjectList`);
const res = await url.json();
console.log(res.data);
} catch (error) {
alert(error);
}
}
getDrinksByName();
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟