Question

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

在我的static func refreshCache() -> Observable<Void> { return MyService.fetchProducts() .flatMapLatest { lostProducts -> Observable<[Product]> in MyService.deleteCache() return Observable.just(lostProducts) } .flatMapLatest { MyService.saveCache($0) } // No compile error }中，我正在渲染导航和react-fullpage（滚动到section组件），并传递isFooterOpen状态和更改状态的方法。

App.js

App.js

导航将状态向下传递到sideButton，在此我基于它显示/隐藏它，效果很好。

问题是当我想从我的FullpageWrapper触发状态更改时，在这里我正在检测是滚动到最后一部分还是从最后一部分向上滚动。

组件正在使用渲染道具，所以基本上我在渲染中调用setState，这会导致无限循环，但我找不到访问该状态（方向，索引等）的解决方法。甚至toggleFooter函数都感觉有些“ hacky”，因为我正在将属性设置为该状态对象，而不是通过该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>
    );
  }
}

我也尝试了简单的事件总线，在该事件中我从FullpageWrapper调度了一个事件，但是我仍在从render调度它，所以这是同样的问题...

我删除了所有不必要的内容，这是codesandbox示例。

Answer 1

如果用setState语句包装if调用，我想那会消除无限循环吗？

我在这里创建了一个更新的代码沙箱，它看起来像您设计的那样起作用：

https://codesandbox.io/s/p39w4z51pq

show = () => { if(!this.state.isFooterOpen) { this.setState({ isFooterOpen: true }); } }; hide = () => { if(this.state.isFooterOpen) { this.setState({ isFooterOpen: false }); } };

react-fullpage-在渲染中避免setState无限循环

1 个答案: