Reactjs 第一次呼叫后对航路点进行响应

在我的OnEnter回调中，我正在进行一个api调用以获取更多数据。获取的数据被添加到我拥有的元素数组中。当我向上滚动时，组件返回视口时，会再次触发api调用

有没有办法绕过这个问题

代码示例： 好吧，让我来清理一下：@jmeas

fetchData(props){  function to call the api with server side pagination
    if(props.previousPosition != 'above') {   //an attempt to check if we passed that waypoint, do not call the api again
      this.setState({page: this.state.page + 1}, function () {  //increment the page number
        this.getCatalogItems(this.state.categoryId, this.state.page) //make api call with incremented page number
          .then((res) => {
            console.log("fetched more data with scroll", res) //results
          })
      })
    }else{

      console.log("not calling fetch data")
    }
  }

这就是我对航路点的称呼：

class ProductContainer extends React.Component {
  constructor(props) {
    super(props);
    console.log("catalog product container initialized", this.props);
  }



  render() {

   const {catalogProducts, getCatalogItems, renderWaypoint} = this.props;

    console.log("props in roduct container", this.props)
    return (
      <div className="products-container">
              {
                catalogProducts && catalogProducts['products'] ?
                  catalogProducts['products'].map((product) => {
                  return (
                    <span>
                      HIIIIIIIIIIIIIIIIIIIIIIIIIII
                    <CatalogProduct product={product}/>

                      </span>
                  )
                })
                  :
                  false
              }
              {renderWaypoint()}

              ########################################################################### way point here ################################################
        </div>

    );
  }
}

ProductContainer.propTypes = {
  catalogProducts: React.PropTypes.any.isRequired,
  getCatalogItems: React.PropTypes.func.isRequired,
  renderWaypoint: React.PropTypes.func.isRequired
};



export default ProductContainer;

类ProductContainer扩展React.Component{
建造师（道具）{
超级（道具）；
log（“目录产品容器已初始化”，this.props）；
}
render（）{
const{catalogProducts，getCatalogItems，renderWaypoint}=this.props；
log（“产品容器中的道具”，this.props）
返回(
{
catalogProducts&&catalogProducts['products']？
catalogProducts['products'].map（（产品）=>{
返回(
你好
)
})
:
假的
}
{renderWaypoint（）}
###########################################################################这里的支点################################################
);
}
}
ProductContainer.propTypes={
目录产品：React.PropTypes.any.isRequired，
getCatalogItems:React.PropTypes.func.isRequired，
渲染点：React.PropTypes.func.isRequired
};
导出默认产品容器；

我想做的是：

---

我有一个无限卷轴目录页。我希望在用户向下滚动到航路点时进行api调用，正如上面的组件所示，在我们呈现第一次api调用返回的产品之后，我希望再次往返到服务器并呈现，而无需查看代码中的任何代码。。。似乎可以在加载数据后创建标志并将其设置为true，然后在加载数据之前检查该标志。也许不是最优雅的方式，但它会起作用

class SomeClass extends React.Component {

    constructor(props) {
        super(props);
        this.data = [];
        this.fetched = [];
        this._loadPageContent = this._loadPageContent.bind(this);
    }

    render(){
        return (
            <Waypoint
                key={cursor}
                onEnter={this._loadPageContent(this.props.pageId)}
            />
        );
    }


    _loadPageContent(i) {
        if(this.fetched.indexOf(i) <= -1){
            //go get the data
            this.data.push(someApiCall());
            this.fetched.push(i);
        }
    }
}

export default SomeClass;

class SomeClass扩展了React.Component{
建造师（道具）{
超级（道具）；
这个.data=[]；
this.fetched=[]；
this.\u loadPageContent=this.\u loadPageContent.bind（this）；
}
render（）{
返回(
);
}
_loadPageContent（一）{
如果（this.fetched.indexOf（i）是同一个api调用，我只是将需要获取数据的页码传递给它。当我进行api调用时，我只是增加页码。我想如果我理解您的意思，您是在将页码传递给加载函数……那么我更新的代码块是否有帮助？