Next.js 根据 router.asPath 更新状态

Question

我有一个带有 Stepper 的 next.js 多步表单。步进器在初始加载时具有以下状态：

  const [steps, setStepsData] = useState([
    { name: 'Vertrag', status: 'current' },
    { name: 'Dateneingabe', status: 'upcoming' },
    { name: 'Bestätigung', status: 'upcoming' },
  ]);

此状态在上下文中处理，我还使用路由器根据表单步骤设置我的 URL。每次用户单击下一步按钮时，都会调用以下函数：

  const nextFormStep = (contract='') => {
    const nextStep = formStep + 1;
    router.push(`?step=${nextStep}`);
    setFormValues({ contract });
  };

到目前为止一切顺利。现在在我的上下文中，我想检查是否 router.asPath === '/?step=1' 那么它应该像这样做：

router.asPath === '/?step=1' ? setStepsData( steps => [
  { name: 'Vertrag', status: 'current' },
  { name: 'Dateneingabe', status: 'current' },
  { name: 'Bestätigung', status: 'upcoming' },]) : console.log('doesnt work')
}, [])

所以，如果我就这样离开它，我会得到一个 错误：重新渲染太多。 React 限制渲染的数量以防止无限循环。 我想，我可能需要像这样使用 Effect：

useEffect(() => { 
      router.asPath === '/?step=1' ? setStepsData( steps => [
      { name: 'Vertrag', status: 'current' },
      { name: 'Dateneingabe', status: 'current' },
      { name: 'Bestätigung', status: 'upcoming' },]) : console.log('doesnt work') 
}, [])

只有在我点击浏览器中的重新加载按钮后状态才会改变，而不是更改为下一个表单步骤。我如何达到以下行为：我点击下一步按钮 - url 路径改变，状态改变，我点击返回按钮，再次，url 改变，步骤状态也改变？

Answer 1

我只需要'subscribe'对路由器进行如下更改：

router.asPath === '/?step=1' ? setStepsData( steps => [
  { name: 'Vertrag', status: 'current' },
  { name: 'Dateneingabe', status: 'current' },
  { name: 'Bestätigung', status: 'upcoming' },]) : console.log('doesnt work')
}, [router])

从上面的评论和这个 SO-post 中得到了提示：

Next.js 根据 router.asPath 更新状态

Next.js update state depending on router.asPath

reactjs

next.js

next-router