Question

我的页面上有一个收藏夹列表，当我单击删除时，我将在我的redux操作中发送一个API调用，该调用将从收藏夹列表中删除该收藏夹。像这样：

constructor(props) {
    super(props);
    this.state = {
        favourite: null
    };

    this.getFavourite();

}

getFavourite() {
   // get api call
}

removeFav(id) {
    const { removeFav } = this.props;

    removeFav(id);
    this.setState({ favourite: null });
}

但是，由于API不会再次返回整个列表，因此我需要调用另一种方法来获取整个列表（现在没有我刚刚删除的列表）。

componentDidUpdate(prevState) {
    if (prevState.favourite !== this.state.favourite) {
        this.getFavourites();
    }
}

但是，由于这种重新渲染，每次我单击“删除”时，页面似乎都会闪烁一下。

我是否甚至需要执行componentDidUpdate()或将收藏夹的状态设置为null就足够了？如果执行此操作，则不会遇到闪烁，但UI只是通过状态而不是通过存储中的实际数据进行更新（除非我刷新了页面，因为在页面加载时调用了getFavourites()。

Answer 1

如果您使用的是redux，建议您这样做：

在componentDidMount上：分派一个包含获取api的操作，对于您来说，它是getFavorite，然后将api数据存储在redux存储中。
使用mapStateToProps从redux存储获取整个列表。
将列表从第2步应用到用户界面。
要删除，请分派一个操作以调用remove api，更新redux存储上的列表。其余的应该由react和redux处理。

重新渲染反应时组件闪烁

1 个答案: