Посмотрел другие похожие вопросы на этот вопрос, но я не могу найти тот, который имеет отношение к этому.
У меня в основном есть раздел блога на веб-сайте, и страница списка статей использует нумерацию страниц. Каждый раз, когда вызывается разбиение на страницы, он запрашивает следующие 10 статей блога из резервной копии. Все работает абсолютно нормально, за исключением одной незначительной ошибки, которую я не могу понять. Внутри .map l oop в возвращаемом документе я вывожу вместе с заголовком ссылку и c автора. Я получаю идентификатор автора из серверной части CMS, и я использую компонент для доставки изображения автора обратно (пропуски). Это отлично работает при начальной загрузке, но никогда не меняется даже при повторном вызове.
Вот фрагменты моего кода, которые актуальны;
Статьи. js
constructor() {
super();
this.state = {
posts: [],
type: null,
totalResults: 0,
pageCount: 0,
currentPage: 1,
perPage: 9,
limit: 9,
offset: 0,
}
this.getPosts = this.getPosts.bind(this);
this.toggleType = this.toggleType.bind(this);
}
componentDidMount(){
this.loadAPI();
this.loadAPI(true);
}
getPosts(){
if(this.state.posts.length){
return this.state.posts.map((content,index) => {
var url = content.Title.replace(/[^\w\s]/gi, '');
url = url.replace(/\s+/g, '-').toLowerCase();
let bkgrdimg = `url(http://**.**.**.***${content.articleImage.url})`;
return(
<Col md={4} className="mb-4" key={index}>
<VisibilitySensor partialVisibility={'top'} offset={{ top: -550 }} minTopValue="30">
{({isVisible}) =>
<Card className={`animated ${isVisible ? 'fadeIn' : 'fadeOut'}`}>
<Link to={{ pathname: `/posts/${url}`,state: {content} }} style={{overflow: 'hidden'}}>
{ content.articleImage !=null ?
<Card.Img variant="top" alt={content.Title} src={"http://**.**.**.***"+content.articleImage.url} />
</Link>
<Card.Body>
<Link to={{ pathname: `/posts/${url}` }}>
<Card.Title>{this.truncateOnWord(content.Title,50)}</Card.Title>
</Link>
<Card.Text>{this.truncateOnWord(content.SEOMetaDescription,150)}</Card.Text>
</Card.Body>
<Card.Footer>
<Portrait displayFromAPIID={content.Author._id} displayProfile="false" publishedDate={<Moment format="MMM DD, YYYY">{content.DatePublished}</Moment>}></Portrait>
</Card.Footer>
</Card>
}
</VisibilitySensor>
</Col>
);
})
}
}
handlePageClick = data => {
var myElement = document.getElementById('articles');
var topPos = myElement.offsetTop;
window.scrollTo({top: topPos, behavior: 'smooth'});
var selected = data.selected +1;
var offset = ((selected * this.state.perPage) - this.state.perPage);
var limit = (this.state.perPage * selected);
this.setState({ offset: offset, limit: limit }, () => {
this.loadAPI();
});
};
render() {
return (
<div>
<Row>
<CardDeck>
{this.getPosts()}
</CardDeck>
</Row>
<div >
<ReactPaginate
previousLabel='«'
previousClassName={ 'previousBtn'}
nextLabel='»'
nextClassName={'nextBtn'}
breakLabel={'...'}
breakClassName={'break-me'}
activeClassName={'active'}
pageClassName={'page-item'}
pageLinkClassName={'page-link'}
containerClassName={'pagination'}
subContainerClassName={'pages pagination'}
pageCount={this.state.pageCount}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={this.handlePageClick}
/>
</div>
</div>
);
}
Вы можно увидеть в функции getPosts () на карте l oop см. использование компонента - это то, что не обновляется по запросу.
Портретный компонент. js
constructor(props) {
super(props);
this.state = {
staffToDisplay: this.props.staffToDisplay,
imageSrc: null,
imageSrcHover: null,
name: null,
role: null,
bio: null,
skillset: [],
apiID: null,
profileInDetail: this.props.profileInDetail,
displayProfile: this.props.displayProfile,
displayFromAPIID: this.props.displayFromAPIID,
publishedDate: this.props.publishedDate,
show: false,
hover: false,
linkToPage: this.props.linkToPage,
}
this.handleModal = this.handleModal.bind(this);
this.selectStaffMembers = this.selectStaffMembers.bind(this);
this.toggleHover = this.toggleHover.bind(this);
}
componentDidMount() {
this.selectStaffMembers();
this.setState({displayFromAPIID: this.props.displayFromAPIID});
}
componentDidUpdate() {
}
selectStaffMembers() {
//List all staff members
const portraits = [
{
'objName': imgOneObject,
'role': 'Job Title',
'name': 'Raul Duke',
'bio': 'this is a bio',
'skillset': ['blah','blah','blah','blah'],
'imgSwap': imgOneObjectAltVersion,
'apiID': '5d84***',
'linkedin' : 'https://...',
},
{
...
...
...
},
];
//Get corresponding portrait for this instance
for (var i = 0; i < portraits.length; i++) {
if (this.state.staffToDisplay){
if (this.state.staffToDisplay === Object.keys(portraits[i])[0]) {
this.setState({
imageSrc: Object.values(portraits[i])[0],
name: Object.values(portraits[i])[2],
role: Object.values(portraits[i])[1],
bio: Object.values(portraits[i])[3],
skillset: Object.values(portraits[i])[4],
imageSrcHover: Object.values(portraits[i])[5],
apiID: Object.values(portraits[i])[6],
linkedin: Object.values(portraits[i])[7],
})
}
}
if (this.state.displayFromAPIID){
if(this.state.displayFromAPIID === Object.values(portraits[i])[6]){
this.setState({
imageSrc: Object.values(portraits[i])[0],
name: Object.values(portraits[i])[2],
role: Object.values(portraits[i])[1],
bio: Object.values(portraits[i])[3],
skillset: Object.values(portraits[i])[4],
imageSrcHover: Object.values(portraits[i])[5],
apiID: Object.values(portraits[i])[6],
})
}
}
}
}
getPortraitImg(){
var profile = ""
profile = <p className="mt-3">{this.state.name}<br/>{this.state.publishedDate}</p>
return(
<Row className="showAuthor">
<Col lg={4}>
<img className="profileImg img-fluid d-block mx-auto" src={this.state.imageSrc} alt={this.state.name}></img>
</Col>
<Col lg={8}>
{ profile }
</Col>
</Row>
)
}
render() {
const portrait_img = this.getPortraitImg();
return (
<div>
{portrait_img}
</div>
);
}
Я думал, что это потому, что функция selectStaffMembers () была onMount, но если я поместил ее в componentDidUpdate (), это просто выдает ошибку.
Может кто-нибудь увидеть, где я иду не так?