以被动方式更新帖子计数答案

【问题标题】：Updating post count the reactive way以被动方式更新帖子计数
【发布时间】：2020-01-30 15:26:33
【问题描述】：

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

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

但是，如果 postCount: this.props.postCount 在客户端 UI 中发生更改，我还需要动态更新新闻提要。帖子计数在下面的渲染方法中用于选择要显示的帖子数。

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>
        );
    })

非常感谢任何帮助！ - 我在 componentDidUpdate 里面想这样的事情：

if (prevProps.postCount !== this.props.postCount) {
    this.setState( this.state.postCount; );
}

编辑：

我现在使用道具中的 postCount 而不是状态，它会立即更新！ :D

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

组件将自动对其 props 的更改做出反应，因此无需将任何 props 转移到状态。在这种情况下，如果postCount 是一个道具，那么当它更改时，它应该会影响您共享的用于渲染组件的代码片段。但是，我不知道 posts 是否是该州的一部分，在您的情况下应该是，并且您的方法 getPosts 应该在新帖子中设置状态。

【讨论】：