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

Question

我有一个带有步进器的 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

我只需要“订阅”路由器的更改，如下所示:

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 中得到了提示:useEffect doesn't update state on route change