如何为typescript函数添加参数

v1l68za4  于 2023-01-06  发布在  TypeScript
关注(0)|答案(1)|浏览(235)

我有一个typescript函数来获取更多的文章:

const fetchMoreData = () => {
    let newPageNum = pageNum + 1;
    let articles =Array.from(localArticle.values()); 
    let offset: number[] = getArtcleKeys(articles);
    let params = {
      pageNum: newPageNum,
      pageSize: pageSize,
      offset: Math.max(...offset)
    };
    if(currentTabKey === "1"){
      articleService.getRecommandArticlesImpl(params).then(()=>{
        setPageNum(newPageNum);
      });
    }
    if(currentTabKey === "2"){
      articleService.getOfficialArticlesImpl(params).then(()=>{
        setPageNum(newPageNum);
      });
    }
    if(currentTabKey === "3"){
      articleService.getOriginalArticlesImpl(params).then(()=>{
        setPageNum(newPageNum);
      });
    }
  }

现在我想为这个函数添加一个字符串参数currentTabKey,然后在外部代码snippnet中调用这个函数,如下所示:

const renderList = (items: JSX.Element[], currentTabKey: string) => {
    if(items.length === 0){
      return (<div><Spin /></div>);
    }
    return (<InfiniteScroll
      dataLength={localArticle.size} 
      next={fetchMoreData(currentTabKey)}
      hasMore={true}
      loader={<h4><Spin /></h4>}
      endMessage={
        <p style={{textAlign: 'center'}}>
          <b>Yay! You have seen it all</b>
        </p>
      }
      refreshFunction={refreshArticles}
      pullDownToRefresh={true}
      pullDownToRefreshContent={
        <h3 style={{textAlign: 'center'}}>↓ Pull down to refresh</h3>
      }
      releaseToRefreshContent={
        <h3 style={{textAlign: 'center'}}>↑ Release to refresh</h3>
      }>
      {items}
    </InfiniteScroll>);
  }

当我调整函数fetchMoreData并添加参数时,调用它时显示错误:

(property) next: Fn
Type 'void' is not assignable to type 'Fn'.ts(2322)
index.d.ts(4, 5): The expected type comes from property 'next' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<InfiniteScroll> & Readonly<Props>'
No quick fixes available

可以为这个函数添加一个额外参数吗?我应该怎么做来解决这个问题?我试过这样写:

next={fetchMoreData.bind(currentTabKey)}

似乎不起作用。

bnlyeluc

bnlyeluc1#

我尝试过这种方法来添加一个额外的参数,它的工作,调整函数和添加参数:

const fetchMoreData = (currentTabKey: string) => {
    if(currentTabKey !== tabKey){
      return;
    }
    let newPageNum = pageNum + 1;
    let articles =Array.from(localArticle.values()); 
    let offset: number[] = getArtcleKeys(articles);
    let params = {
      pageNum: newPageNum,
      pageSize: pageSize,
      offset: Math.max(...offset)
    };
    if(currentTabKey === "1"){
      articleService.getRecommandArticlesImpl(params).then(()=>{
        setPageNum(newPageNum);
      });
    }
    if(currentTabKey === "2"){
      articleService.getOfficialArticlesImpl(params).then(()=>{
        setPageNum(newPageNum);
      });
    }
    if(currentTabKey === "3"){
      articleService.getOriginalArticlesImpl(params).then(()=>{
        setPageNum(newPageNum);
      });
    }
  }

然后像这样调用这个函数:

const renderList = (items: JSX.Element[], currentTabKey: string) => {
    if(items.length === 0){
      return (<div><Spin /></div>);
    }
    return (<InfiniteScroll
      dataLength={localArticle.size} 
      next={fetchMoreData.bind(this,currentTabKey)}
      hasMore={true}
      loader={<h4><Spin /></h4>}
      endMessage={
        <p style={{textAlign: 'center'}}>
          <b>Yay! You have seen it all</b>
        </p>
      }
      refreshFunction={refreshArticles}
      pullDownToRefresh={true}
      pullDownToRefreshContent={
        <h3 style={{textAlign: 'center'}}>↓ Pull down to refresh</h3>
      }
      releaseToRefreshContent={
        <h3 style={{textAlign: 'center'}}>↑ Release to refresh</h3>
      }>
      {items}
    </InfiniteScroll>);
  }

相关问题