reactjs - 在 reducer 中更新状态后如何重新渲染 UI？

Question

我有一个已保存项目的列表，我希望能够“取消保存”我想要的任何项目。我成功地从保存的列表中删除了该项目，但我必须重新加载页面才能显示更新的列表（删除该项目后）。如何在 UI 中即时更新它？

在 saved.js（减速器）中：

const initialState = {
  savedItems: [],
  }
...
case UNSAVE_ITEM: {
      if (!error) {
        const {user_un_favorite} = payload;
        if (user_un_favorite && user_un_favorite.ok) {
          const savedItems = state.savedItems || [];
          return {
            ...state,
            savedItems: savedItems.filter(i => i.id != payload.id)
          }
        }
      }
    }

在 Saved.js 屏幕中

...
 renderSavedCards = () => {
    const { savedItems } = this.props;
    return (
      <div className="list-right">
        {savedItems.map((item, index) => {
          return (
            <div>
              <div className="savedCard">
                <SearchCard
          
                 data={item.data}
                 
                />
                <span
                  className="deleteSaved"
                  onClick={(e) => {
                    e.stopPropagation();
                    this.props.unSaveItem(item.id);
                  }}
                >
                  <IcTrash className='trash-icon'/>
                </span>
              </div>
            </div>
          );
        })}
        {this.renderLoadMore()}
      </div>
    );
  };

标签： reactjsredux