将页面的值从pagination.jsx传递到app.jsx

Question

当我试图进入反应时，我开始了一个项目并卡住了。也许有人可以帮助我找到这个问题。波纹管我解释了该应用应该做什么。

用户在 searchbar.jsx 的内部输入框中键入查询搜索栏组件将 QUERY 传递给 app.jsx 并启动fetchphotos函数，该功能启动了API请求。

要整理分页，app.jsx imports pagination.jsx ，它计算响应中的图片数并显示分页按钮。

上述作品。

但是现在，如果您单击"分页"按钮，则应将分页组件的 page 的值传递到app.jsx，然后将其传递给fetchphotos函数（运行API请求）。

）。

我猜问题是 page 的值永远不会找到app.jsx，因此API请求缺少页面的值。

我花了几个小时，但由于缺乏知识，找不到方法来修复它。您能把我指向正确的方向，并向我展示代码有什么问题？

app.jsx

import React, { Component } from "react";
import axios from "axios";
import Pagination from "../Pagination";
import SearchBar from "../SearchBar";
import ListItem from "../ListItem";
import "./app.scss";
class App extends Component {
  state = {
    photos: [],
    totalPhotos: 0,
    perPage: 30,
    currentPage: 1,
    query: null
  };
  componentDidMount() {
    this.fetchPhotos("gorilla", this.state.currentPage);
  }
  fetchPhotos = (inputValue, page) => {
    const baseUrl = "https://api.unsplash.com/search/photos";
    const options = {
      headers: {
        Authorization: `Client-ID ${process.env.REACT_APP_UNSPLASH_API_KEY}`
      },
      params: {
        query: inputValue,
        page: this.state.page,
        per_page: this.state.perPage
      }
    };
    axios
      .get(baseUrl, options)
      .then(response => {
        this.setState({
          photos: response.data.results,
          totalPhotos: parseInt(response.headers["x-total"]),
          currentPage: page,
          query: inputValue
        });
      })
      .catch(() => {
        console.log("Error");
      });
  };
  render() {
    return (
      <div className="app">
        <SearchBar onSubmit={this.fetchPhotos} />
        <Pagination
          current={this.state.currentPage}
          total={this.state.totalPhotos}
          perPage={this.state.perPage}
          query={this.state.query}
          onPageChanged={query => this.fetchPhotos(this.state.query)}
        />
        <List data={this.state.photos} />
      </div>
    );
  }
}
const List = ({ data }) => {
  var items = data.map(photo => <ListItem key={photo.id} photo={photo} />);
  return <div className="grid">{items}</div>;
};
export default App;

searchbar.jsx

import React, { Component } from "react";
class SearchBar extends Component {
  state = {
    inputValue: ""
  };
  handleFormSubmit = e => {
    e.preventDefault();
    this.props.onSubmit(this.state.inputValue);
  };
  render() {
    return (
      <div className="header">
        <h1>Search for images on Unsplash</h1>
        <form onSubmit={this.handleFormSubmit} className="ui form">
          <input
            type="text"
            placeholder="Type here to search for images"
            value={this.state.inputValue}
            onChange={e => this.setState({ inputValue: e.target.value })}
          />
        </form>
      </div>
    );
  }
}

导出默认搜索栏;

pagination.jsx

import React, { Component } from "react";
class Pagination extends Component {
  pages() {
    var pages = [];
    for (var i = this.rangeStart(); i <= this.rangeEnd(); i++) {
      pages.push(i);
    }
    return pages;
  }
  rangeStart() {
    var start = this.props.current - this.props.pageRange;
    return start > 0 ? start : 1;
  }
  rangeEnd() {
    var end = this.props.current + this.props.pageRange;
    var totalPages = this.totalPages();
    return end < totalPages ? end : totalPages;
  }
  totalPages() {
    return Math.ceil(this.props.total / this.props.perPage);
  }
  nextPage() {
    return this.props.current + 1;
  }
  prevPage() {
    return this.props.current - 1;
  }
  hasFirst() {
    return this.rangeStart() !== 1;
  }
  hasLast() {
    return this.rangeEnd() < this.totalPages();
  }
  hasPrev() {
    return this.props.current > 1;
  }
  hasNext() {
    return this.props.current < this.totalPages();
  }
  changePage(page) {
    this.props.onPageChanged(page);
    console.log("Page inside Pagination", page);
  }
  render() {
    return (
      <div className="pagination">
        <div className="pagination__left">
          <span
            role="button"
            className={!this.hasPrev() ? "hidden" : ""}
            onClick={e => this.changePage(this.prevPage())}
          >
            Prev
          </span>
        </div>
        <div className="pagination__mid">
          <ul>
            <li className={!this.hasFirst() ? "hidden" : ""}>
              <span role="button" onClick={e => this.changePage(1)}>
                1
              </span>
            </li>
            <li className={!this.hasFirst() ? "hidden" : ""}>...</li>
            {this.pages().map((page, index) => {
              return (
                <li key={index}>
                  <span
                    role="button"
                    onClick={e => this.changePage(page)}
                    className={this.props.current === page ? "current" : ""}
                  >
                    {page}
                  </span>
                </li>
              );
            })}
            <li className={!this.hasLast() ? "hidden" : ""}>...</li>
            <li className={!this.hasLast() ? "hidden" : ""}>
              <span
                role="button"
                onClick={e => this.changePage(this.totalPages())}
              >
                {this.totalPages()}
              </span>
            </li>
          </ul>
        </div>
        <div className="pagination__right">
          <span
            className={!this.hasNext() ? "hidden" : ""}
            onClick={e => this.changePage(this.nextPage())}
          >
            Next
          </span>
        </div>
      </div>
    );
  }
}
Pagination.defaultProps = {
  pageRange: 2
};
export default Pagination;

Answer 1

我认为您的错误在``on Change''，因为您正在提供当前状态查询以获取而不是新查询：

onPageChanged={query => this.fetchPhotos(this.state.query)}

您应该将其替换为新查询，例如：

onPageChanged={query => this.fetchPhotos(query)}

编辑1：

您可以在https://codesandbox.io/s/9ymjj8ko9p?fontsize=14。

就像我说的那样，更改是在app.jsx上：

1. 参数固定的传递页面从函数参数而不是

2. 将OnPageChange Prop固定在分页上，例如：

   onPageChanged={page => this.fetchPhotos(this.state.query, page)}