Javascript react fullpage-避免在渲染中设置状态无限循环

TLDR问题：基本上我想在页脚打开时隐藏sidenav按钮

在我的

App.js

中，我呈现了导航和反应完整页面（滚动到section组件），并传递了isFooterOpen状态和更改它的方法

App.js

class App extends Component {
  state = { isFooterOpen: false };
  show = () => { this.setState({ isFooterOpen: true }); };
  hide = () => { this.setState({ isFooterOpen: false }); };

  render() {
    return (
      <React.Fragment>
        <Navigation
          isFooterOpen={this.state.isFooterOpen}
          hide={this.hide}
          show={this.show}
        />

        <FullPageWrapper
           isFooterOpen={this.state.isFooterOpen}
           hide={this.hide}
           show={this.show}
           {...fullpageOptions}
        />              
      </React.Fragment>
    );
  }
}

function toggleFooter(state, props) {
  if (state.callback === "onLeave") {
    if (state.direction === "down") {
      const emptySection = document.querySelector("#empty");
      if (emptySection.classList.contains("active")) {
        state.isFooterOpen = true;
        // props.show(); // change app state and hide side button - infinite loop here
      }
    } else if (state.direction === "up" && state.origin.index === 5) {
      state.isFooterOpen = false;
      // props.hide(); // change app state and hide side button - infinite loop here
    }
  }
}

const FullPageWrapper = fullpageProps => (
  <ReactFullpage
    {...fullpageProps}
    render={({ state, fullpageApi }) => {
      toggleFooter(state, fullpageProps);

      return (
        <div style={{ position: "relative" }}>
          <HeroSection />
          <AboutSection />
          <TeamSection />
          <ServicesSection />
          <ContactSection />
          <Empty />    
          <Footer isFooterOpen={state.isFooterOpen} />
        </div>
      );
    }}
  />
);

类应用程序扩展组件{
state={isFooterOpen:false}；
show=（）=>{this.setState（{isFooterOpen:true}）；}；
hide=（）=>{this.setState（{isFooterOpen:false}）；}；
render（）{
返回(
);
}
}

导航将状态向下传递到sideButton，在那里我基于它显示/隐藏它，这很好

问题是，当我想从FullpageWrapper中触发状态更改时，我会检测到是滚动到最后一部分还是从最后一部分向上滚动

组件正在使用渲染道具，所以基本上我在render中调用setState，它会导致无限循环，但我找不到访问该状态（方向、索引等）的解决方法。即使是toggleFooter函数也感觉有点“黑”，因为我正在为该状态对象设置属性，而不是用npm ReactFullpage组件保留自己的状态

FullpageWrapper.js

class App extends Component {
  state = { isFooterOpen: false };
  show = () => { this.setState({ isFooterOpen: true }); };
  hide = () => { this.setState({ isFooterOpen: false }); };

  render() {
    return (
      <React.Fragment>
        <Navigation
          isFooterOpen={this.state.isFooterOpen}
          hide={this.hide}
          show={this.show}
        />

        <FullPageWrapper
           isFooterOpen={this.state.isFooterOpen}
           hide={this.hide}
           show={this.show}
           {...fullpageOptions}
        />              
      </React.Fragment>
    );
  }
}

function toggleFooter(state, props) {
  if (state.callback === "onLeave") {
    if (state.direction === "down") {
      const emptySection = document.querySelector("#empty");
      if (emptySection.classList.contains("active")) {
        state.isFooterOpen = true;
        // props.show(); // change app state and hide side button - infinite loop here
      }
    } else if (state.direction === "up" && state.origin.index === 5) {
      state.isFooterOpen = false;
      // props.hide(); // change app state and hide side button - infinite loop here
    }
  }
}

const FullPageWrapper = fullpageProps => (
  <ReactFullpage
    {...fullpageProps}
    render={({ state, fullpageApi }) => {
      toggleFooter(state, fullpageProps);

      return (
        <div style={{ position: "relative" }}>
          <HeroSection />
          <AboutSection />
          <TeamSection />
          <ServicesSection />
          <ContactSection />
          <Empty />    
          <Footer isFooterOpen={state.isFooterOpen} />
        </div>
      );
    }}
  />
);

功能切换页脚（状态、道具）{
if（state.callback==“onLeave”）{
如果（state.direction==“down”）{
const emptySection=document.querySelector（“#empty”）；
if（emptySection.classList.contains（“活动”））{
state.isFooterOpen=true；
//show（）；//更改应用程序状态并隐藏侧边按钮-此处为无限循环
}
}else if（state.direction==“up”&&state.origin.index==5）{
state.isFooterOpen=false；
//props.hide（）；//更改应用程序状态并隐藏侧边按钮-此处为无限循环
}
}
}
const FullPageWrapper=fullpageProps=>(
{
切换页脚（状态，fullpageProps）；
返回(
示例。
如果用
If
语句包装
setState
调用，我猜这会删除无限循环

我在这里创建了一个更新的代码沙盒，它的功能与您设计的一样：



show=（）=>{
如果（！this.state.isFooterOpen）{
this.setState（{isFooterOpen:true}）；
}
};
隐藏=（）=>{
如果（this.state.isFooterOpen）{
this.setState（{isFooterOpen:false}）；
} 
};
如果用
If
语句包装
setState
调用，我猜这将删除无限循环

我在这里创建了一个更新的代码沙盒，它的功能与您设计的一样：



show=（）=>{
如果（！this.state.isFooterOpen）{
this.setState（{isFooterOpen:true}）；
}
};
隐藏=（）=>{
如果（this.state.isFooterOpen）{
this.setState（{isFooterOpen:false}）；
} 
};
这是一个工作人员，他正在尝试使用一些全局变量（有点绝望）但非常感谢！这毕竟是有道理的。太好了！我可以想象，每一个调用都会重新触发渲染道具，并循环进行。我必须多读一点来理解这里的流程！这个工作人员，正在尝试使用一些全局变量（有点绝望）但非常感谢！这毕竟是有道理的。太好了！我可以想象，每一次调用都会重新触发渲染道具，然后循环。我还需要多读一点才能理解这里的流程！