尝试分页时 SetPage 不是函数错误

Question

我第一次在 react 应用程序中尝试分页， 我将 page 和 setPage 作为道具传递给 COinsPagination.js，但我在某处出错并收到“类型错误 setPage 不是一个函数，我无法弄清楚我哪里出错了。我认为我没有打错字.

App.js

import React, { useState, useEffect } from "react";
import Coins from "./components/Coins";
import CoinsPagination from "./components/CoinsPagination.js";

import "./App.css";

const App = () => {
  const [coins, setCoins] = useState([]);
  const [q, setQ] = useState("");
  const [page, setPage] = useState(5);
  const getCoinList = async () => {
    // const response = await fetch("https://api.coingecko.com/api/v3/coins/list");
    const response = await fetch(
      `https://api.coingecko.com/api/v3/coins/markets?vs_currency=INR&order=market_cap_desc&per_page=100&page=${page}&sparkline=false`
    );

    const coinList = await response.json();
    console.log(coinList);
    setCoins(coinList);
  };

  useEffect(() => {
    getCoinList();
  }, [page]);
  function search(rows) {
    return rows.filter(
      (row) => row.name.toLowerCase().indexOf(q.toLowerCase()) > -1
    );
  }
  return (
    <div>
      <div style={{ textAlign: "center", padding: ".5rem" }}>
        <label
          htmlFor="search"
          style={{ fontWeight: 700, marginRight: ".3rem" }}
        >
          Search
        </label>
        <input
          type="text"
          id="search"
          value={q}
          name="search"
          onChange={(e) => {
            setQ(e.target.value);
          }}
          style={{ padding: "1.2rem" }}
        />
      </div>
      <div style={{ textAlign: "center" }}>
        <CoinsPagination />
      </div>

      <Coins coins={search(coins)} />
      <CoinsPagination page={page} setPage={setPage} />
    </div>
  );
};

export default App;

CoinPagination.js

import React from "react";
import { Pagination } from "react-bootstrap";

const CoinsPagination = ({ page, setPage }) => {
  // function gotoPageBy(amount) {
  //   setPage((prevPage) => prevPage + 1);
  // }
  return (
    <Pagination>
      <Pagination.First onClick={() => setPage(1)} />     
      <Pagination.Item onClick={() => setPage(1)}>{1}</Pagination.Item>
      <Pagination.Ellipsis />

      <Pagination.Next />
      <Pagination.Last />
    </Pagination>
  );
};

export default CoinsPagination;

Answer 1

您第一次使用CoinsPagination 没有任何名为page 和setPage 的道具。

import React, { useState, useEffect } from "react";
import Coins from "./components/Coins";
import CoinsPagination from "./components/CoinsPagination.js";

import "./App.css";

const App = () => {
  const [coins, setCoins] = useState([]);
  const [q, setQ] = useState("");
  const [page, setPage] = useState(5);
  const getCoinList = async () => {
    // const response = await fetch("https://api.coingecko.com/api/v3/coins/list");
    const response = await fetch(
      `https://api.coingecko.com/api/v3/coins/markets?vs_currency=INR&order=market_cap_desc&per_page=100&page=${page}&sparkline=false`
    );

    const coinList = await response.json();
    console.log(coinList);
    setCoins(coinList);
  };

  useEffect(() => {
    getCoinList();
  }, [page]);
  function search(rows) {
    return rows.filter(
      (row) => row.name.toLowerCase().indexOf(q.toLowerCase()) > -1
    );
  }
  return (
    <div>
      <div style={{ textAlign: "center", padding: ".5rem" }}>
        <label
          htmlFor="search"
          style={{ fontWeight: 700, marginRight: ".3rem" }}
        >
          Search
        </label>
        <input
          type="text"
          id="search"
          value={q}
          name="search"
          onChange={(e) => {
            setQ(e.target.value);
          }}
          style={{ padding: "1.2rem" }}
        />
      </div>
      <div style={{ textAlign: "center" }}>
        <CoinsPagination /> // This is the one I am referring to
      </div>

      <Coins coins={search(coins)} />
      <CoinsPagination page={page} setPage={setPage} />
    </div>
  );
};

export default App;