时间戳

首页 > 解决方案 > React - 如果 redux 状态发生更改，则防止重新渲染组件

javascript - React - 如果 redux 状态发生更改，则防止重新渲染组件

问题描述

我的应用程序中有一些列表 - 有类似的屏幕

ListScreen
CreateItemScreen
EditItemScreen

所以首先用户去ListScreen，他可以点击“添加项目”去CreateItemScreen。如果他想删除项目，他需要去EditItemScreen并放置“删除”按钮。

项目存储在 redux 状态 - 所以当用户创建项目时，它将存储在 redux 中。如果用户编辑它 - 它将在 redux 中进行编辑。如果他想删除项目，则需要在 redux 中将其删除。

当用户单击“删除”系统将其删除并将用户重定向回ListScreen. 按钮系统触发删除项目 redux 操作，项目被删除并且组件正在重新渲染 - 因为 redux 状态发生了变化，所以组件将被重新渲染。在触发重定向之后（react-router-dom）。但是在触发重定向之前出现错误。因为 item 已经被删除并且 screen 正在尝试获取一些 item 道具。

组件看起来像：

export const EditItemScreen = ({}) => {
  const { itemId } = useRouteMatch().params;
  const item = useSelector(getItemSelector(itemId));
  const history = useHistory();
  const dispatch = useDispatch();

  const handleDeleteClick = () => {
    history.replace('listPath');
    dispatch(deleteItem(itemId));
  };

  return (
    <div>
      <h1>{item.title}</h1>

      <form>...form</form>

      <div>
        <button onClick={handleDeleteClick}>
          Delete
        </button>
      </div>
    </div>
  );
};

当用户单击“删除”时，会出现错误，告诉我无法title从未定义中获取（因为项目已被删除）。

我可以阻止最后一次重新渲染吗？只是在删除项目之前执行重定向，不要回到这个屏幕，不要重新渲染它？

标签： javascriptreactjsreact-router-dom

解决方案

您可以根据是否定义了 item.title 来尝试条件渲染。

推荐阅读