在 ReactJS 中分页时如何获取数据？答案

【问题标题】：how to fetch the data while pagination in ReactJS?在 ReactJS 中分页时如何获取数据？
【发布时间】：2020-09-02 18:40:11
【问题描述】：

我要解决的是，在获取数据时将页面value 作为参数传递。并设置默认分页value为"1"。

端点网址：http://localhost:8000/api/blog_list?page=

api 数据：

{
    "count": 3,
    "next": "http://localhost:8000/api/blog_list?page=2",
    "previous": null,
    "results": [
        {
            "id": 6,
            "url": "http://localhost:8000/api/blog_detail/test3",
            "title": "test3",
            "slug": "test3",
            "image": "http://localhost:8000/media/blog/author.jpg",
            "description": "test3",
            "created_on": "2020-05-13T13:36:45Z",
            "status": true,
            "category": [
                1
            ]
        },
        {
            "id": 10,
            "url": "http://localhost:8000/api/blog_detail/test3",
            "title": "Hamid",
            "slug": "test3",
            "image": "http://localhost:8000/media/blog/person_2_2beHkt1.jpg",
            "description": "test",
            "created_on": "2020-05-13T14:59:30.855849Z",
            "status": true,
            "category": [
                2
            ]
        }
    ]
}

./src/BlogList.js

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: "",
      response: "",
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    try {
      const response = await fetch(
        `http://localhost:8000/api/blog_list?page=${value}`
      );
      const JsonResponse = await response.json();
      this.setState({ response: JsonResponse });
    } 
    catch (error) {
      console.log(error);
    }
  };

  render() {
    const { response } = this.state;

    if (!response) {
      return "Loading...";
    }

    return (
      <div>
        {response.results.map((response) =>(

            <div class="col-md-12">

                <h3> {response.title} </h3>

            </div>


        ))}
      </div>
    );
  }
}

export default App;

【问题讨论】：

标签： javascript json reactjs pagination react-component

【解决方案1】：

我不确定我是否正确理解了您的问题，但如果您想将状态值作为参数添加到此 fetch 中，您可以使用字符串连接来传递值：

常量响应 = 等待获取（ http://localhost:8000/api/blog_list?page=${value} );

http://localhost:8000/api/blog_list?page= + this.state.value

【讨论】：

【解决方案2】：

我认为一个问题是您没有在 fetch 调用中使用该状态。它应该看起来像这样。

const response = await fetch(
  `http://localhost:8000/api/blog_list?page=${this.state.value}`
);

如果你想将你的状态中的值初始化为1，那么你可以像这样初始化你的状态：

this.state = {
  value: "1",
  response: "",
};

【讨论】：

【解决方案3】：

fetchData = async () => {
const { value } = this.state
try {
  const response = await fetch(
    `http://localhost:8000/api/blog_list?page=${value}`
  );
  const JsonResponse = await response.json();
  this.setState({ response: JsonResponse });
} 
catch (error) {
  console.log(error);
}

};

“值”未在 fetchData 中定义

【讨论】：