Javascript 以反应式方式更新后计数

我是新来的。我创建了一个新闻组件，它使用一个json url，然后发布一些新闻文章。在客户端UI中，如果客户端更改json url，它将使用以下代码更新而不刷新页面：

componentDidUpdate(prevProps) {
   if (prevProps.jsonUrl !== this.props.jsonUrl) {
       this.getPosts();
   }
}

但是，如果客户端UI中的postCount:this.props.postCount发生更改，我还需要对新闻提要进行反应式更新。在下面的渲染方法中，使用post计数来选择要显示的post数

posts
    .slice(0, postCount)
    .map(post => {
        // Variables to use
        let { id, name, summary, url, imgUrl} = post;
        // Stripping html tags from summary
        //let strippedSummary = summary.replace(/(<([^>]+)>)/ig,"");
        // What we actually render
        return (
            <div key={id} className={ styles.post}>
                <p>{name}</p>
                {/* <p>{summary}</p> */}
                <a href={url}>{url}</a>
                <img className={ styles.postImage} src={imgUrl} />
            </div>
        );
    })

编辑：

我现在使用道具的后计数，而不是状态，它会立即更新！：D

// Grabbing objects to use from state
const { posts, isLoading } = this.state;
const { postCount } = this.props;

---

组件将自动对其道具的更改做出反应，因此无需将任何道具转换为状态。在这种情况下，如果

postCount

是一个道具，当它更改时，它应该会影响您为渲染组件而共享的代码片段。但是，我不知道

posts

是否是状态的一部分，在您的情况下，它应该是状态的一部分，并且您的方法

getPosts

应该使用新的posts设置状态

// Grabbing objects to use from state
const { posts, isLoading } = this.state;
const { postCount } = this.props;