使用setState()更新一次图像列表

Question

我有一个列表，其中包含每个元素的图像url和otehr参数。现在我在每个元素"中添加了更多的参数；isFavorite；(真/假(，默认设置"；false"；。

现在我点击图片调用favorite/api和api上的成功，更新列表，如isFavorite:true，如果为true，则为特定元素设置为false。

所以，现在的问题是，一旦我设置了收藏夹/不收藏夹标志并使用setState((更新我的列表，图像就会闪烁。

听说图像url未更改。

我还检查了"；KeyExtractor"；键对于所有元素都是唯一的，并且在列表更新后不会更改键。

我还设置了源&图像属性的defaultSource，但静止图像会飞起来。

请检查以下代码

<FlatList
ref={(ref) => { this.flatListRef = ref; }}
data={this.state.articles}
renderItem={({ item }) => (<Article
navigation={this.props.navigation}
isMemberLoggedIn={this.state.isMemberLoggedIn}
article={item}
addFavoriteCallBack={() => this.onPressAddFavoriteArticles(item.id)}
removeFavoriteCallBack={() => this.onPressRemoveFavoriteArticles(item.id)}
/>)}    
keyExtractor={(item, index) => index.toString()}
------
/>

// Add favorite
if (response) {
let tempArticles = this.state.articles.map((ele, i) => {
if (ele.id === articleId) {
ele.isFavorite = true;
}
return ele;
})
this.setState({ articles: tempArticles });
}

// Remove favorite
if (response) {
let tempArticles = this.state.articles.map((ele, i) => {
if (ele.id === articleId) {
ele.isFavorite = false;
}
return ele;
})
this.setState({ articles: tempArticles });
}

如果有人有解决方案或其他任何问题，请提供帮助。

提前谢谢。

Answer 1

尝试使用React.memo或useMemo React hook创建自定义组件，它可以帮助您重新渲染和返回已存储的组件。

看看下面的例子。

反应备忘录示例