在不重新呈现所述列表的情况下更新反应列表
在不重新呈现所述列表的情况下更新反应列表
提问于 2018-10-23 02:49:20
我正在尝试弄清楚如何呈现一组div，而不是在添加新的集合时重新呈现整个列表。
所以我有一个有状态的组件。在所述有状态组件中，我有一个函数，A获取post id的列表，B向每个post id发出请求并将结果推送到一个数组中。如下所示：
getArticles = () => {
axios.get(`${api}/topstories.json`)
.then(items => {
let articles = items.data;
let init = articles.slice(0,50);
init.forEach(item => {
axios.get(`${post}/${item}.json`)
.then(article => {
this.setState({ articles: [...this.state.articles, article.data]});
});
})
});
}然后，我有了第二个函数，它接受这些信息并将其输出到帖子列表中。如下所示：
mapArticles = () => {
let articles = this.state.articles.map((item, i) => {
let time = moment.unix(item.time).fromNow();
return(
<section className="article" key={i}>
<Link className="article--link" to={`/posts/${item.id}`}/>
<div className="article--score">
<FontAwesomeIcon icon="angle-up"/>
<p>{item.score}</p>
<FontAwesomeIcon icon="angle-down"/>
</div>
<div className="article--content">
<div className="article--title">
<h1>{item.title}</h1>
</div>
<div className="article--meta">
{item.by} posted {time}. {item.descendants ? `${item.descendants} comments.` : null}
</div>
</div>
<div className="article--external">
<a href={item.link} target="_blank">
<FontAwesomeIcon icon="external-link-alt"/>
</a>
</div>
</section>
)
});
return articles;
}然后，我在render函数中使用{this.mapArticles()}返回适当的信息。
然而，每当应用程序加载新的数据片段时，它都会重新呈现整个列表，从而导致大量的jank。也就是说，当第一个请求完成时，它呈现第一个div。当第二个请求完成时，它重新呈现第一个div并呈现第二个div。当第三个请求完成时，它会重新呈现第一个和第二个请求，并呈现第三个请求。
有没有办法让React识别具有该键的div已经存在，并且在状态改变和函数再次运行时应该被忽略？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52935927
复制相关文章
相似问题