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

【问题标题】：React - prevent re-rendering component if redux state is changedReact - 如果 redux 状态发生更改，则防止重新渲染组件
【发布时间】：2020-05-14 20:29:34
【问题描述】：

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

ListScreen
CreateItemScreen
EditItemScreen

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

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

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

组件看起来像：

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（因为项目已被删除）。

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

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案1】：

您是否尝试过在返回上一屏幕之前进行调度？

  dispatch(deleteItem(itemId));
  history.replace('listPath');

一切都完成后，您想离开当前组件，所以我认为这应该可行。

【讨论】：

【解决方案2】：

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

【讨论】：