Javascript 如何使用react spring自动调整高度

我正在尝试使用react-spring创建自动高度动画，我已经实现了动画，但是如果我转到另一个页面并返回到具有自动高度动画的页面，则在刷新页面之前，动画不会工作。我如何解决这个问题

以下是我的代码：

      const defaultHeight = "100px";
      const [contentHeight, setContentHeight] = useState(defaultHeight); 
      const [ref, { height }] = useMeasure(); 
      const expand = useSpring({
        config: { ...config.default, duration: 250 },
        height: `${contentHeight}px` || defaultHeight,
      });

  useEffect(() => {
    setContentHeight(height);
    window.addEventListener("resize", setContentHeight(height));
    return window.removeEventListener("resize", setContentHeight(height));
  }, [height]);

return (
    <div className="team-management">
      <div className="team-management-tabs-header">
        <div className="team-management-tab-items">
          {tabs.map((tab, index) => (
            <div
              id={editable === true ? "" : `${tab}`}
              className={
                activeTab === index
                  ? "team-management-tab-item selected"
                  : "team-management-tab-item"
              }
              key={tab}
              role="button"
              tabIndex={tab}
              onKeyPress={() => {
                return;
              }}
              onClick={() => {
                if (editable === true) {
                  setActiveTab(index);
                } else if (index !== 5 && index !== 6) {
                  setActiveTab(index);
                }
              }}
            >
              {teamData.type === "organization" ? (
                <span className="tab-item-text">{tab}</span>
              ) : (
                <>
                  {tab !== "Sub-Team" && (
                    <span className="tab-item-text">{tab}</span>
                  )}
                </>
              )}
              <span className="tab-item-indicator" />
            </div>
          ))}
        </div>
      </div>
      <animated.div style={expand}>
        <div className="team-management-tab-panes" ref={ref}>
          {tabs[activeTab] === "Mission" && (
            <Mission
              editable={editable}
              teamId={teamId}
              teamData={teamData}
              fetchTeamData={fetchTeamData}
              notify={notify}
            />
          )}
          {tabs[activeTab] === "Managers" && <Managers members={members} />}
          {tabs[activeTab] === "Members" && (
            <Members
              members={members}
              teamId={teamId}
              tab={tabs[activeTab]}
              userPublicId={userPublicId}
              fetchTeamData={fetchTeamData}
              notify={notify}
            />
          )}

          {tabs[activeTab] === "Invitees" && (
            <Invitees
              teamData={teamData}
              teamId={teamId}
              privateTeamId={teamData.id}
              fetchTeamData={fetchTeamData}
              tab={tabs[activeTab]}
            />
          )}

          {tabs[activeTab] === "Sub-Team" && (
            <SubTeam
              teamId={teamId}
              teamData={teamData}
              members={members}
              fetchTeamData={fetchTeamData}
            />
          )}
        </div>
      </animated.div>
    </div>
  );

const defaultHeight=“100px”；
const[contentHeight，setContentHeight]=useState（defaultHeight）；
常量[ref，{height}]=useMeasure（）；
const expand=useSpring({
配置：{…config.default，持续时间：250}，
高度：`${contentHeight}px`| defaultHeight，
});
useffect（（）=>{
设置内容高度（高度）；
addEventListener（“resize”，setContentHeight（height））；
返回窗口。removeEventListener（“resize”，setContentHeight（height））；
}，[身高]；
返回(
{tabs.map（（选项卡，索引）=>(
{
返回；
}}
onClick={（）=>{
如果（可编辑===真）{
setActiveTab（索引）；
}否则如果（索引！==5&&index！==6）{
setActiveTab（索引）；
}
}}
>
{teamData.type==“组织”(
{tab}
) : (
{tab！==“子团队”&&(
{tab}
)}
)}
))}
{tabs[activeTab]=“任务”&&(
)}
{tabs[activeTab]===“管理者”&&}
{tabs[activeTab]==“成员”&&(
)}
{tabs[activeTab]==“被邀请者”&&(
)}
{tabs[activeTab]=“子团队”&&(
)}
);

---

谢谢您的帮助

有人知道我为什么要刷新页面以使动画正常工作吗？有人能帮我解决这个问题吗？有人能帮我解决这个问题吗？需要更多的上下文，我才能提供帮助。如果你能把它添加到codesandbox.io中，我很乐意看一看！