在页面重新加载后进行突变时响应未更新但最初正在更新我可以在.network选项卡中看到

Question

在这里，我试图在突变上添加“视图”。 重新加载后创建的第一个视图遇到了这个问题。 如果您获得 404 页面并点击后退按钮，它似乎第二次工作正常。

这是发生的事情，大图（它发生得太快，不暂停调试器就看不到）： 1.send mutation 2.get result 3.setViewId 被调用，更新 URL 查询字符串 4.page 被呈现，点击检查基于ID的视图。 如果它不在节目的视图列表中，则重定向到 /not-found（404 页面）。

最后一个是它变得奇怪的地方。 调试时，显示在 .network 选项卡中包含新视图……但按 ID 查找视图返回未定义，因为我从 useQuery 获得的响应在页面重新加载后不会更新记录。 我现在不知道为什么。

创建 viewId 和 setViewId

  const viewId = Number(searchParams.get('viewId')) || undefined;
  const setViewId = useCallback<(viewId: number, replace?: boolean) => void>(
    (id: number, replace = false) => {
      navigate(route(`?viewId=${id}`), { replace });
      setViewZoneId(undefined);
    },
    [navigate, route],
  );

  // If view id is not set, set it
  useEffect(() => {
    if (viewId == null) setViewId(show.defaultViewId, true);
  }, [setViewId, show.defaultViewId, viewId]);

  // If there's a view but view zone id isn't set, set it
  useEffect(() => {
    if (viewId == null || viewZoneId != null) return;
    const view = show.views.find(({ id }) => id === viewId);
    if (view == null) return;
    setViewZoneId(view.viewZones[0].id);
  }, [show.views, viewId, viewZoneId]);
  // end hooks

  if (viewId == null) return null;

  const view = show.views.find(({ id }) => id === viewId);
  if (view == null) return <Navigate to={route('/not-found')} replace />;

  if (viewZoneId == null) return null;

将 setViewId 传递给组件

 <CreateViewWizard {...wizard.props} show={show} setViewId={setViewId} />

这里在 CreateViewWizard 中进行突变和设置 viewId

 <Button
    color="primary"
    disabled={(step === 0 && name.trim() === '') || step > 2}
    onClick={async () => {
    setStep((prevStep) => prevStep + 1);
     if (step < 2) return;

     close();
     assert(typeof layoutId === 'number', 'Layout not set');

     const { data } = await createView({ variables: { layoutId, name, showId: show.id } });
     if (data?.createView?.view != null) setViewId(data.createView.view.id);
       }}
      variant="contained"
     >
    {step === 2 ? 'Create' : 'Next'}
  </Button>

Answer 1

如果viewId是字符串类型而id是数字类型，那么，它们永远不会严格相等 ( === )，例如"5" === 5始终为 false。 尝试类型安全的比较，例如"5" === String(5) 。

例子：

 console.log('5 === "5"', 5 === "5"); // false console.log('String(5) === "5"', String(5) === "5"); // true

你的代码：

const view = show.views.find(({ id }) => String(id) === viewId);

请记住， Array.prototype.find在找不到匹配元素时也可能返回undefined 。 您可能应该检查任何真实的view返回值，并在view为假时重定向。

if (!view) {
  return <Navigate to={route('/not-found')} replace />;
}