React - 如果 redux state 更改，则防止重新渲染组件

Question

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

ListScreen
CreateItemScreen
EditItemScreen

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

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

当用户单击“删除”系统将其删除并将用户重定向回ListScreen 。 按钮系统触发删除项目 redux 操作，项目被删除并且组件正在重新渲染 - 因为 redux state 已更改，因此将重新渲染组件触发重定向后（ 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 （因为项目已被删除）。

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

Answer 1

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

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

完成所有操作后，您想离开当前组件，因此我认为这应该可以。

Answer 2

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