Question

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

ListScreen
CreateItemScreen
EditItemScreen

因此，首先用户转到ListScreen，他可以单击“添加项目”并转到CreateItemScreen。如果他要删除项目，则需要转到EditItemScreen，然后放置“删除”按钮。

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

当用户单击“删除”时，系统将其删除并将用户重定向回ListScreen。按钮系统触发删除项目redux动作，删除项目并重新呈现组件-因为redux状态已更改，所以组件将被重新呈现。重定向之后被触发（react-router-dom）。但是在触发重定向之前会出现错误。因为项目已被删除，并且屏幕正在尝试使用一些项目道具。

组件外观如下：

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

我可以阻止最后一次重新渲染吗？只需在删除项目之前执行重定向，就不返回此屏幕并且不重新渲染它？

Answer 1

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

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

所有步骤完成后，您想保留当前组件，因此我认为这应该可行。

Answer 2

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

React-如果Redux状态更改，则防止重新渲染组件

2 个答案: