Question

我要从一个会话中提取一些数据，然后才能设置path的初始状态。我尝试了无数种不同的方式。这是为了显示链接的活动状态，以便用户知道它们的位置，如果刷新页面但未加载初始负载，则这在下面的工作。任何帮助将不胜感激：

const StickyNav = () => {
  const { sessionToken, sessionData } = useContext(SessionContext);
  const stickyNavItems = sessionData && sessionToken ? stickyNavItemsByRole(sessionData.user) : null;
  const [path, setPath] = useState(stickyNavItems ? stickyNavItems[0].defaultPath : "");

  useEffect(() => {
    // console.log("useEffect being hit with: ", stickyNavItems[0].defaultPath);
    setPath(stickyNavItems ? stickyNavItems[0].defaultPath : "");
  },[]);
  console.log("path: ", path);
  console.log("sessionData: ", sessionData);

  return (
    <Fragment>
      {stickyNavItems && (
        <nav class="StickyNav">
          <ul class="StickyNav-items">
            {stickyNavItems.map((item) => {
              return (
                <li class={`StickyNav-item${item.href == path ? " StickyNav-item--active" : ""}${item.pretext ? " StickyNav-item--pretext" : ""}`}>
                  <Link href={item.href} onClick={() => setPath(item.href)}>
                    {item.pretext && <span class="StickyNav-pretext">{item.pretext}</span>}
                    {item.text}
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>
      )}
    </Fragment>
  );
};

Answer 1

我猜您需要将stickyNavItems移至状态，并在sessionData更新后使用useEffect对其进行更新。

const [stickyNavItems, setNavItems] = useState(sessionData && sessionToken ? stickyNavItemsByRole(sessionData.user) : null);


useEffect(() => {
   setNavItems(sessionData && sessionToken ? stickyNavItemsByRole(sessionData.user) : null)
}, [sessionData, sessionToken])

数据加载后设置状态挂钩

1 个答案: