如何在 ReactJS 中获取分页效果？

Question

如下image，有分页设置。如何在用户点击page no.时设置分页效果
下面是我的 src 代码，但在获取数据时输出得到 null 值。

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

./src/BlogList.js

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


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


  function pageClick(e){
    this.setState({value: e.target.innerHTML});
    this.fetchData();

  };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {

    try {
      const response = await fetch(
        `http://localhost:8000/api/blog_list?page=${this.state.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">

                    <img src={response.image} className="App-logo"/>

                    <div class="text text-2 pl-md-4">

                      <h3 class="mb-2">{response.title}</h3>

                    </div>
            </div>
        ))}

        <div class="col">
            <ul>
              <li><a href="#">&lt;</a></li>
              <li class="active"><span onClick={this.pageClick}>1</span></li>
              <li><a href="#" onClick={this.pageClick}>2</a></li>
              <li><a href="#" onClick={this.pageClick}>3</a></li>
              <li><a href="#" onClick={this.pageClick}>4</a></li>
              <li><a href="#" onClick={this.pageClick}>5</a></li>
              <li><a href="#">&gt;</a></li>
            </ul>
        </div>

      </div>
    );
  }
}

export default App;

Answer 1

几个问题

1. pageClick 不应定义在 constructor 内，而应是类的方法。
2. setState 是异步的，所以你应该使用附加参数，它是在设置状态后调用的回调
3. 直接在pageClick 中直接传递您想要设置的页面而不是读取innerHTML 将是一种更好的方法（虽然错误与此无关）
4. 您应该将value 初始化（为清楚起见，而不是错误）为实际的页码。
5. 另一个好主意是不要隐藏变量名。因此，当您映射到 results 时，重命名外部 response（in the state）或单个 response。

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


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

  }

  componentDidMount() {
    this.fetchData();
  }

  pageClick = (page) => {
    this.setState({value: page}, this.fetchData);
  };

  fetchData = async () => {

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


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

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

    return (
      <div>
        {responses.results.map((response) =>(
            <div class="col-md-12">
                    <img src={response.image} className="App-logo"/>
                    <div class="text text-2 pl-md-4">
                      <h3 class="mb-2">{response.title}</h3>
                    </div>
            </div>
        ))}
        <div class="col">
            <ul>
              <li><a href="#">&lt;</a></li>
              <li class="active"><span onClick={() => this.pageClick(1)}>1</span></li>
              <li><a href="#" onClick={() => this.pageClick(2)}>2</a></li>
              <li><a href="#" onClick={() => this.pageClick(3)}>3</a></li>
              <li><a href="#" onClick={() => this.pageClick(4)}>4</a></li>
              <li><a href="#" onClick={() => this.pageClick(5)}>5</a></li>
              <li><a href="#">&gt;</a></li>
            </ul>
        </div>
      </div>
    );
  }
}

export default App;

Answer 2

试试这样的：

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

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

  pageClick(e) {
    this.fetchData(+e.target.innerHTML);
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async (pageNo = 0) => {
    try {
      const response = await fetch(
        `http://localhost:8000/api/blog_list?page=${pageNo}`
      );
      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>
        ... your html
      </div>
    );
  }
}

export default App;