ReactJS Компонент не обновляется при изменении родительского состояния

Question

У меня есть раздел блога в моем ReactJS, который извлекает сообщения из безголовой CMS, страница использует нумерацию страниц и все прекрасно работает, однако в каждом элементе сообщения я вызываю компонент для ввода имени автора>, так что в основном я вытащить идентификатор из API-интерфейса без заголовка, передать его компоненту и вернуть имя автора.

В первый раз это работает нормально, но всякий раз, когда я использую пагинацию страниц, это не так вернуть что-либо еще из компонента независимо от информации, передаваемой реквизитом. Вот мой код:

Страница блога;

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();
                    return(
                        <Col md={4} className="mb-4" key={index}>

                            {({isVisible}) => 
                            <Card>
                                <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>
                                    <PortraitTest displayFromAPIID={content.Author._id}></PortraitTest>
                                </Card.Footer>
                            </Card>
                            } 
                        </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>
                        <CardDeck>
                            {this.getPosts()}
                        </CardDeck>

                        <ReactPaginate
                        previousLabel='&laquo;'
                        previousClassName={ 'previousBtn'}
                        nextLabel='&raquo;'
                        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>
        );
}

Авторский компонент:

import React, { Component } from 'react';

class PortraitTest extends Component {
    constructor(props) {
        super(props);

        this.state = {
            displayFromAPIID: this.props.displayFromAPIID,
            name: null,
            apiID: null,
        }
        this.portraits = [
            { 
                'name': 'Name 1',
                'apiID': '5d84ba9c0a011064444a243e',
            },
            { 
                'name': 'Name 2',
                'apiID': '5d84bad40a011064444a2441',
            },
            { 
                'name': 'Name 3',
                'apiID': '5d84d4d00a011064444a244d',
            },
            { 
                'name': 'Name 4',
                'apiID': '5d84ba480a011064444a243a',
            },
            { 
                'name': 'Name 5',
                'apiID': '5d84d4900a011064444a244c',
            },
            { 
                'name': 'Name 6',
                'apiID': '5d84baeb0a011064444a2442',
            },
            { 
                'name': 'Name 7',
                'apiID': '5d84baaf0a011064444a243f',
            },
            { 
                'name': 'Name 8',
                'apiID': '5d84ba720a011064444a243c',
            },
            { 
                'name': 'Name 9',
                'apiID': '5d84d4120a011064444a244a',
            },
            { 
                'name': 'Name 10',
                'apiID': '5d84d4640a011064444a244b',
            },
            { 
                'name': 'Name 11',
                'apiID': '5d84b93a0a011064444a2439',
            },
            { 
                'name': 'Name 12',
                'apiID': '5d84d3b60a011064444a2449',
            },
            { 
                'name': 'Name 13',
                'apiID': '5d84bac00a011064444a2440',
            },
            { 
                'name': 'Name 14',
                'apiID': '5d84ba870a011064444a243d',
            },
            {
                'name': 'Name 15',
                'apiID': '5d84ba5e0a011064444a243b',
            },
            {
                'name': 'Name 16',
                'apiID': '5dd7cbf984b07d000dc63b2e',
            }
            ]

    }

    returnObj(){
        for (var i = 0; i < this.portraits.length; i++) {
            if(this.state.displayFromAPIID === Object.values(this.portraits[i])[1]){
                return(
                    <div>
                        <p><b>{Object.values(this.portraits[i])[0]}<br/>{Object.values(this.portraits[i])[1]}<br/>{this.props.displayFromAPIID}</b></p>
                    </div>
                )
            }
        }
    }

    render() {
        return (
            <div>
                {this.returnObj()}
            </div>
        );
    }
}

export default PortraitTest;

Ниже приведен снимок экрана компонента, выводимого на страницу блога.

У кого-нибудь есть идеи, где я ошибаюсь?

Обратите внимание, что на самом деле страница, на которой находятся статьи блога, в порядке и работает, как и ожидалось, получение правильных данных из API и разбиение на страницы работают отлично, это компонент, к которому я запрашиваю информацию, который не работает .

Спасибо

Answer 1

Это потому, что конструктор не вызывается при последующих рендерингах, он вызывается только один раз для инициализации компонента. Чтобы обновить ваше состояние при изменении свойств, вы должны реализовать componentDidUpdate.

componentDidUpdate(prevProps) {
  if (this.props.displayFromAPIID !== prevProps.displayFromAPIID) {
    this.setState({displayFromAPIID: this.props.displayFromAPIID});
  }
}