В коде нет ошибки, и когда я заполняю объект, тогда нет проблем, но при выполнении отображения и других операций это выглядит следующим образом. А также я утешал этот компонент в то время, когда я видел, что он утешается 2 раза. Почему это утешает 2 раза. Я в полном замешательстве.
код указан ниже
код :-( Знамени)
export default class Banner extends Component {
constructor(props){
super(props)
this.state={
passedId: this.props.data.id,
details:'',
}
}
componentDidMount(){
let data={
id:this.state.passedId
}
axios.post('/getoneartist' ,data)
.then(res=>{
this.setState({details:res.data})
this.forceUpdate()
})
}
render() {
console.log("hai"+this.state.details)
return (
<Container>
<a href="#" onClick={this.props.artist}>
<Row>
<Row><img src={process.env.PUBLIC_URL +'/assets/images/+this.state.details.map(item=>item.dp)} onerror={this.src=process.env.PUBLIC_URL + '/assets/img/'+this.state.eventdetails.map(item=>item.dp)} className="banner-image-size-2"/></Row>
<Row><img src={grad_banner} className="grad-image-size-2"/></Row>
<Col lg="4" className="round-image-padding-2"><img src={process.env.PUBLIC_URL +'/assets/images/logo.png'} onerror={this.src=process.env.PUBLIC_URL + '/assets/img/logo.png'} className="round-image-size-2"/></Col>
<Col lg="4" className="items-padding-2">
<Row className="text-items-2">DJ SHERAM</Row>
<Row className="text-items-2">Mumbai</Row>
<Row className="text-items-2">Bollywood</Row>
</Col>
</Row></a><br /><br /><br /><br /><br />
</Container>
);
}
}
код :-( Layout)
class SingleLayout extends Component {
constructor(props){
super(props);
this.state= {details:this.props.match.params}
}
render() {
return (
<div>
<Row>
<Col xl="4" lg="4"><Row><Col lg='1'></Col><span>1 Artist playing</span></Row><br /><RelatedArtist data={this.state.eventdetails}/></Col>
</Row>
<Row><AdBanner/></Row>
</div>
);
}
}
export default SingleEventsLayout;
код :-( слайд)
export default class Sliders extends Component {
constructor(props){
super(props)
this.state={
Array:[],
}
}
componentDidMount(){
axios.get('/getalllist')
.then(res=>{
this.state.Array = res.data
this.forceUpdate()
})
}
render() {
console.log(this.state.Array)
const settings = {
className: "center",
centerMode: true,
infinite: true,
centerPadding: "24%",
slidesToShow: 1,
speed: 5000,
width:"851px",
infinite: true,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 7000,
nextArrow:false
};
return (
<div className="r-slider-main-section">
<Slider {...settings}>
{this.state.Array.map(item=>
<div className="r-slider-spacer">
<Link to={{pathname:"/events/"+(item.city.city_name)+"/"+(item._id) ,state: { Id: item._id}}}>
<Card style={{borderRadius:"17px"}}>
<img src={process.env.PUBLIC_URL +'/assets/images/'+item.banner} onerror={this.src=process.env.PUBLIC_URL + '/assets/img/logo.png'} className="r-test1" />
<img src={image1} className="r-test2"></img>
<img src={calender} className="r-calender-place"></img>
<text className="r-text-month">DEC</text>
<text className="r-text-date">{item.date_time_start.substring(8, 10)}</text>
<text className="r-text-event-name">@{item.name}</text>
<text className="r-text-event-detail">{item.type} featuring {item.name}</text>
<div className="r-rectangle-icon"><div class="r-rectangle"><div className="r-rectangle-text">{item.amount}</div></div></div>
</Card></Link>
</div>)}
</Slider>
</div>
);
}
}
Здесь я передаю реквизит от слайдера к макету, а затем к следующему, но я не знаю, почему он показывает это так. Я дал вызов axios внутри componentDidMount, но все же это происходит.
Заранее спасибо