ReactJS 組件不會在父狀態更改時更新

Question

我的 ReactJS 中有一個博客部分，它從無頭 CMS 中提取帖子，頁面使用分頁並且一切正常，但是，在每個帖子項目中，我調用一個組件來輸入作者姓名 > 所以基本上我從headless 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});
  }
}