React: я хочу вызвать два API в одной функции - PullRequest
Новая
       26

React: я хочу вызвать два API в одной функции

0 голосов
/ 13 марта 2019

Я новичок в ReactJS, на самом деле здесь я работаю над разбиением на страницы. Я получаю данные страницы с сервера через API. Я использую Loopback для интеграции API. Здесь я показываю список из 10 записей на первой странице, когда пользователь нажимает на следующую, он показывает 10-20 записей, и первая страница записей будет пропущена. Это возможно с помощью фильтра Loopback, и я сделал это вручную, но я не могу реализовать это приложение. Я показываю данные первой страницы через этот вызов API. localhost:8001/parties?filter[limit]=${userId} Он покажет только 10 записей, но я хочу, чтобы Когда пользователь нажимает на следующую, он пропускает предыдущие 10 записей и включает следующие 10 записей. API вызов для этого localhost:8001/parties?filter[limit]=${userId}&&filter[skip]=${userId}. Может кто-нибудь, пожалуйста, помогите, как это сделать. спасибо

Код 

<code>        class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}
) } } ReactDOM.render (, document.querySelector ('div # my-example'))

1 Ответ

0 голосов
/ 13 марта 2019

в вашей функции getData есть setState, вы всегда делаете данные пустым массивом, на мой взгляд, это первая причина, по которой вы должны их удалить, и второе, что вам нужно использовать, это распространить, чтобы добавить новые response.data к вашим данным вштат.Я надеюсь, что это вы ищете. 

 getData(){
    const {userId}=this.state;
    this.setState({
      //delete the next line, don't make it empty array
      //data:[],
      loading:true
    })
    axios.get(`http://localhost:8001/parties?filter[limit]=${userId}`)
    .then(response=>{
      console.log(response.data);
      //and here just you have to use spread like this
      let newData= this.state.data;
      if(newData.length>0){// to be sure data is not empty
      newData = [...newData, ...response.data];
      }else{
      newData = response.data;
      this.setState({
        data: newData,
        loading:false
      })
    })
  }
...