javascript - 如何在 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;

标签： javascriptreactjs

Answer 1

几个问题

1. 不pageClick应该在里面定义constructor，而应该是类的方法。
2. setState是异步的，因此您应该使用附加参数，它是在设置状态后调用的回调
3. 实际传递要直接设置的页面pageClick而不是读取页面将是一种更好的方法innerHTML（尽管错误与此无关）
4. 您应该初始化（为了清楚起见，而不是错误）value到实际的页码。
5. 另一个好主意是不要隐藏变量名。因此，response当您映射到.responseresults

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;