이미지를 생성하기 위해 항목 배열을 매핑하고 있지만 코드를 무한 루프로 보낼 때마다. 내 코드는 다음과 같습니다.
다음은 매핑 코드입니다.
let mySrc = this.state.imageUrl;
{myImages.map(image => {
this.getSrc(userId, image.id);
return(
<img src={mySrc}/>)
})}
이것은 "getSrc"함수입니다.
getSrc = async (userId, image) => {
axios
.get(`http://mysiteeee.com/api/getimage/${userId}/photo/${image}`, {
auth: {
username: 'username',
password: 'password'
},
responseType: 'blob'
})
.then(res => {
let myUrl = URL.createObjectURL(res.data)
console.log(myUrl)
this.setState({
imageUrl: myUrl
})
})
.catch(err => console.log(err))
}
페이지에 갈 때마다 모든 이미지 URL / 이미지를 계속해서 계속 섞습니다. 이미지 URL / 이미지를 한 번만 표시하려면 어떻게합니까? 이미지를 무한대로 셔플하는 것을 어떻게 중지합니까?
다음은 전체 구성 요소의 코드입니다.
import React from 'react';
import axios from 'axios';
import HeaderTwo from './HeaderTwo';
class FullDescription extends React.Component {
constructor(props) {
super(props);
this.state = {
eventInfo: [],
imageUrl: [],
clicked: false,
}
}
componentDidMount = () => {
window.scrollTo(0,0);
this.props.state.images.map(image =>
this.getSrc(this.props.state.id, image.id))
// this.getSrc(this.props.state.id, this.props.state.images[1].id)
}
changeClicked = (userId) => {
if(this.state.clicked === false){
this.setState({
clicked: true
})
} else {
this.setState({
clicked: false
})
}
}
getSrc = async (userId, image) => {
axios
.get(`http://http://mysiteeee.com/api/getimage/${userId}/photo/${image}`, {
auth: {
username: 'username',
password: 'password'
},
responseType: 'blob'
})
.then(res => {
let myUrl = URL.createObjectURL(res.data)
this.state.imageUrl.push(myUrl)
// this.setState({
// imageUrl: myUrl
// })
})
.catch(err => console.log(err))
}
render() {
let item = this.props.state;
let date = new Date(item.date).toDateString();
let time = new Date(item.date).toLocaleTimeString();
let userId = this.props.state.id;
let myImages = this.state.imageUrl;
let checkMark = <button className='attend-button' onClick={() => this.changeClicked(userId)}>Attend Event</button>;
console.log(myImages)
if(this.state.clicked === true){
checkMark = <button className='attend-button' onClick={() => this.changeClicked(userId)}>✓ Attend Event</button>
} else {
checkMark = <button className='attend-button' onClick={() => this.changeClicked(userId)}>Attend Event</button>
}
return(
<div>
<HeaderTwo/>
<body id="full-description-page">
<div className='images-section'>
{myImages.map(mySrc => <img src={mySrc}/>)}
</div>
<div id='heading-strip'>
<img src={myImages} className='heading-image'/>
<div className='heading-info'>
<p className='date'>{date}<br/>{time}</p>
<p className='name'>{item.name}</p>
<p className='location'><b>Location:</b> <br/>{item.location.name}, {item.location.address}, {item.location.city}, {item.location.state}</p>
<div className='button-area'>
{checkMark}
</div>
</div>
</div>
<br/>
<p className='description'><b>Description:</b> {item.description}</p>
<br/><br/><br/><br/>
<p className='comments-header'><b>Comments:</b></p>
<div className='comments-section'>
{item.comments.map(comment =>
<div className='comments'>
<p>{comment.text}<br/><b>-{comment.from}</b></p>
</div>
)}
</div>
</body>
</div>
)
}
}
export default FullDescription;
코드의 문제 getSrc는 render 메서드 및 updating the state.
상태가 변경 될 때마다 React는 render 메서드를 호출합니다.
이 경우 React는 render 메서드를 호출하고 render 메서드에는 상태 업데이트가 있으므로 React는 render 메서드를 다시 호출하고이 프로세스는 영원히 계속됩니다.
해결책.
this.getSrcfrom render 메서드를 제거하고 수명주기 후크 getSrc에서 메서드를 호출합니다 componentDidMount.
지도 기능도 약간 변경했습니다.
예.
let myImages = this.state.imageUrl;
{myImages.map(mySrc => <img src={mySrc}/>)}
componentDidMount() {
this.getSrc();
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다