javascript - 使用 react-infinite-scroller 创建待办事项列表

Question

尝试使用 react-infinite-scroller 创建待办事项列表。该列表将显示 20 个待办事项，滚动时将显示下一个待办事项。我从“https://jsonplaceholder.typicode.com/todos”获取待办事项'.获取的待办事项保存在 todos 变量中。

我已经为这个例子建模:https://github.com/CassetteRocks/react-infinite-scroller/blob/master/docs/src/index.js .

此处演示:https://cassetterocks.github.io/react-infinite-scroller/demo/ .

我看不到 Loading.. 出现并获取更多任务。

代码在这里:https://stackblitz.com/edit/react-tcm9o2?file=index.js

import InfiniteScroll from 'react-infinite-scroller';
import qwest from 'qwest';

class App extends Component {

  constructor (props) {
    super(props);
    this.state = {
      todos: [],
      hasMoreTodos: true,
      nextHref: null
    }
  }

  loadTodos(page){
     var self = this;
    const url = 'https://jsonplaceholder.typicode.com/todos';

    if(this.state.nextHref) {
      url = this.state.nextHref;
    }

    qwest.get(url, {
      linked_partitioning: 1,
      page_size: 10
    }, {
      cache: true
    })
    .then((xhr, resp) => {
      if(resp) {
        var todos = self.state.todos;
        resp.map((todo) => {

          todos.push(todo);
        });

        if(resp.next_href) {
          self.setState({
            todos: todos,
            nextHref: resp.next_href
          });
        } else {
          self.setState({
              hasMoreTodos: false
          });
        }
      }
    });
  }


  render () {
    const loader = <div className="loader">Loading ...</div>;
    console.log(this.state.todos);

    var items = [];
    this.state.todos.map((todo, i) => {
        items.push(
            <div className="track" key={todo.id}>
              <p className="title">{todo.title}</p>
            </div>
        );
    });


    return (
      <InfiniteScroll
            pageStart={0}
            loadMore={this.loadTodos.bind(this)}
            hasMore={this.state.hasMoreTodos}
            loader={loader}>
        <div className="tracks">
          {items}
        </div>
      </InfiniteScroll>
    )
  }
}

更新了我的问题

如何在代码中设置注释的这些地方？

/*if(this.state.nextHref) {
    url = this.state.nextHref;
}*/

and

 /*if(resp.next_href) {
  self.setState({
    todos: todos,
    nextHref: resp.next_href
  });*/

如何设置页面从1变为2，next从2变为3？

class App extends Component {

  constructor (props) {
    super(props);
    this.state = {
      todos: [],
      hasMoreTodos: true,
      page: 1
    }
  }

  loadTodos(page){
    var self = this;

    const url = `/api/v1/project/tasks?expand=todos&filter%5Btype%5D=400&${page}&${per_page}`;

    /*if(this.state.nextHref) {
      url = this.state.nextHref;
    }*/

    axios.get(url, {
      'page': 1,
      'per-page': 10
    })
    .then(resp => {
      if(resp) {
        var todos = [self.state.todos, ...resp];

        /*if(resp.next_href) {
          self.setState({
            todos: todos,
            nextHref: resp.next_href
          });*/
        } else {
          self.setState({
              hasMoreTodos: false
          });
        }
      }
    });
  }


  render () {
    const loader = <div className="loader">Loading ...</div>;

    var divStyle = {
       'width': '100px';
       'height': '300px';
       'border': '1px solid black',
       'scroll': 'auto'
    };

    const items = this.state.todos.map((todo, i) => 
        <div className="track" key={todo.id}>
            <p className="title">{todo.title}</p>
        </div>);


    return (
        <div style={divStyle}>
            <InfiniteScroll
                pageStart={1}
                loadMore={this.loadTodos.bind(this)}
                hasMore={this.state.hasMoreTodos}
                loader={loader}>
            <div className="tracks">
                {items}
            </div>
            </InfiniteScroll>
        </div>
    )
  }
}

更新 2

代码在这里:https://stackblitz.com/edit/react-4lwucm

import InfiniteScroll from 'react-infinite-scroller';
import axios from 'axios';

class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: [],
      hasMoreTodos: true,
      page: 1,
      nextPage: 1,
      finishedLoading: false
    };
  }


  loadTodos = (id) => {
    if(!this.state.finishedLoading) {
      const params = {
        id: '1234',
        page: this.state.nextPage,
        'per-page': 10,
      }

      axios({
        url: `/api/v1/project/tasks`,
        method: "GET",
        params
      })
      .then(res => { 
        let {todos, nextPage} = this.state;

        if(resp) {    //resp or resp.data ????
          this.setState({
            todos: [...todos, ...resp], //resp or resp.data ????
            nextPage: nextPage + 1,
            finishedLoading: resp.length > 0 //resp or resp.data ????
          });
        }
      })
      .catch(error => {
        console.log(error);
      }) 
    }
  }

  render() {
    const loader = <div className="loader">Loading ...</div>;
    const divStyle = {
      'height': '300px',
      'overflow': 'auto',
      'width': '200px',
      'border': '1px solid black'
    }

   const items = this.state.todos.map((todo, i) => 
    <div className="track" key={todo.id}>
      <p className="title">{todo.title}</p>
    </div>);

    return (
      <div style={divStyle} ref={(ref) => this.scrollParentRef = ref}>
        <div>
            <InfiniteScroll
              pageStart={0}
              loadMore={this.loadTodos}
              hasMore={true || false}
              loader={<div className="loader" key={0}>Loading ...</div>}
              useWindow={false}
              getScrollParent={() => this.scrollParentRef}
            >
                {items}
            </InfiniteScroll>
        </div>
      </div>
    );
  }
}

Answer 1

编辑:我刚刚意识到你使用了 this作为起点:

为什么你一次得到所有东西

好吧，因为您的源只是一个大 JSON。

您正在使用的脚本中的逻辑适用于 SoundCloud 的 API，它对巨大的列表进行分页(也就是逐 block 返回)。

您的 API 不分页，这就是您一次接收所有内容的原因。

查看来自 SoundCloud API 的示例结果:

{
    "collection": [
        {
            "kind": "track",
            "id": 613085994,
            "created_at": "2019/04/29 13:25:27 +0000",
            "user_id": 316489116,
            "duration": 476281,
            [...]
        },
        [...]
    ],
    "next_href": "https://api.soundcloud.com/users/8665091/favorites?client_id=caf73ef1e709f839664ab82bef40fa96&cursor=1550315585694796&linked_partitioning=1&page_size=10"
}

next_href 中的 URL 给出了下一批项目的 URL(每次 URL 相同，但 'cursor' 参数不同)。这就是无限列表起作用的原因:每次，它都会获取下一批。

您必须实现服务器端分页才能实现此结果。

响应您的编辑:

UPDATED MY QUESTION

How can I set these places commented in the code?

/*if(this.state.nextHref) {
    url = this.state.nextHref; }*/

and

/*if(resp.next_href) {   self.setState({
    todos: todos,
    nextHref: resp.next_href   });*/

忘记加载 nextHref，你没有那个。您拥有的是当前页码(您已将内容加载到哪一页)。

尝试以下方法:

if (!self.state.finishedLoading) {
  qwest.get("https://your-api.org/json", {
    page: self.state.nextPage,
    'per-page': 10,
  }, {
    cache: true
  })
  .then((xhr, resp) => {
    let {todos, nextPage} = self.state;

    if(resp) {
      self.setState({
        todos: [...todos, ...resp],
        nextPage: nextPage + 1,
        finishedLoading: resp.length > 0, // stop loading when you don't get any more results
      });
    }
  });
}

一些挑剔

在这里你正在改变self.state (bad) , 除了使用具有副作用的 Array.map (并且仅针对该副作用):

    var todos = self.state.todos;
    resp.map((todo) => {
      todos.push(todo);
    });

你可以这样写:

    var todos = [self.state.todos, ...resp];

这里 map 的用法相同:

var items = [];
this.state.todos.map((todo, i) => {
    items.push(
        <div className="track" key={todo.id}>
          <p className="title">{todo.title}</p>
        </div>
    );
});

应该写成:

const items = this.state.todos.map((todo, i) => 
    <div className="track" key={todo.id}>
      <p className="title">{todo.title}</p>
    </div>);