在React中通过API提取数据的正确方法

如何解决在React中通过API提取数据的正确方法

我正在学习javascript和React，挑战（在Hackerrank实践中）是从具有多个页面的API中获取数据。按钮应与页面数一样多，单击每个按钮后，该特定页面的数据应显示在下面，如下所示：

这是我写的组件：

import React from 'react';

const url = "https://jsonmock.hackerrank.com/api/articles?page=";
const default_page = 1;

class Articles extends React.Component {
  state = {
    pageCount: 1,body: {},currentPage: 1,error: null,isLoading: false,data: []
  };

  componentDidMount(){
    this.setState({isLoading: true});
    fetch(url+default_page)
    .then(response => response.json())
    .then(body => this.setState({
      pageCount: body.total_pages,data: body.data,body: body,}))
    .catch(err => this.setState({error: err}));
  }

  pageButtonGenerator(){
    if(this.state.body){
      let pageButtons=[];
      for(var i=1; i<=this.state.pageCount; i++){
        const id = i; //need this to use in event handler,BUT WHY DOES i NOT WORK (the value is always i=this.state.pageCount)
        pageButtons.push(<button data-testid="page-button" key={"page-button-"+i} onClick={(e) => this.buttonClickHandler(id)}>{i}</button>);
      }
      return pageButtons;
    }
    else{
      return <button data-testid="page-button" key="page-button-1">1</button>
    }
  }

  buttonClickHandler = (pageNum) => {
    // console.log(pageNum);
    this.setState({isLoading: true});
    fetch(url+pageNum)
    .then(response => response.json())
    .then(body => this.setState({
      pageCount: body.total_pages,currentPage: pageNum
    }))
    .catch(err => this.setState({error: err}));
    // this.titlesGenerator();
  }

  titlesGenerator = () => {
    if(this.state.data){
      return this.state.data.map((element,index) => {
        if(element.title){ return <li key={"title-"+index+1} data-testid="result-row">{element.title}</li> }
        else{ return null }
      })
      // console.log(this.state.data);
      
    }
  }

  render() {
    return (
      <React.Fragment>
        <div className="pagination">
          {this.pageButtonGenerator()}
        </div>
        <ul className="results">
        {this.titlesGenerator()}
        </ul>
      </React.Fragment>
    );
  }
}

export default Articles;

尽管我的代码通过了测试用例，但我对执行正确的方式并不十分自信。我有这样的疑问：

我应该一次性获取所有页面以避免多次网络呼叫，还是应该在每次单击页面按钮时都进行呼叫？
我是否以正确的方式生成按钮（请参见pageButtonGenerator）？
在pageButtonGenerator中的for循环中，我是否以正确的方式调用了onClick处理程序？我试图直接传递变量“ i”，但始终为= 6（循环的退出值）。我正在努力理解为什么变量i也是6。我认为闭包将确保值始终正确。
我应该如何处理状态存储的内容以及应该导出而不存储的内容？

接受建设性的批评。谢谢

解决方法

您获取每个请求的页面的原因很简单，如果所有用户访问的都是页面1，则获取所有页面是过分的。
＆3：通常，您宁愿创建一个小部件React组件，该组件将分页器包装在一个单独的组件中，并向其传递页面数。
此小部件只是您设置为分页小部件的列表。
所以确实，pageButtonGenerator内部的逻辑是不必要的。
4：在处理ajax时，通常我将具有三个属性：

{isFetching，结果，错误}

result是一个嵌套对象，其中包含ajax调用结果的所有属性。
属于分页的属性将传递到分页小部件。
可以导出的属性通常不存储；如果您忘记更新它们，则会导致错误。 Imo，最好在运行时派生。

更多说明：

这是2020年，请尽可能使用功能组件。
我不太喜欢在React组件中进行所有状态管理。
如果您希望更清晰地分离关注点，请查看Redux和Redux观察到的。
这还将回答您有关去哪里的许多问题。

我尝试用简单的术语进行解释：

我应该一次性获取所有页面以避免多次网络呼叫，还是应该在每次单击页面按钮时都进行呼叫？

A：如果您正在制作Web应用程序并且有500页，则不认为是实际情况。即使您不能说用户可以浏览每一页，也可以随时获取全部500页是否有意义。经验法则是您了解可用的总数据并执行pagination。例如，用户单击5页。然后获取5页数据。在此之前，即使您不确定用户是否要单击，也为什么不在用户浏览器中添加开销。希望能回答这个问题。

我是否以正确的方式生成按钮（请参见pageButtonGenerator）？

A：是的。学习分页的更好方法。但是您正在正确处理动态按钮生成

在pageButtonGenerator中的for循环中，我是否以正确的方式调用onClick处理程序？我试图直接传递变量“ i”，但始终为= 6（循环的退出值）。我正在努力理解为什么变量i也是6。我认为闭包将确保值始终正确。

A：是的，您说对了它的关闭问题。之所以会发生是因为您正在使用

for(var i=1; i<=this.state.pageCount; i++){
//var keyword

javascript中的

var是函数作用域，这意味着var位于函数作用域中，因此当buttonClickHandler在循环已运行后获取它的值时，即循环关闭其6个位时已经设置了5次。这就是为什么它发送ID为6的原因。最简单的解决方法是使用：let for(let i=1; i<=this.state.pageCount; i++){

我应该如何处理状态存储的内容以及应该导出而不存储的内容？

通常良好的经验法则是处于error，loading和data 状态。根据其组合，您可以显示结果。诸如页面计数，当前数据之类的关键数据应以您的状态存储，否则您将不会获得下一状态和上一状态

在React中通过API提取数据的正确方法

如何解决在React中通过API提取数据的正确方法

解决方法

相关推荐