如何在React中實作來自JSON資料的“查看更多”鏈接

這就是我想要做的。我從 JSON 回應（本地）回傳一堆物件。我想顯示第一個讓我們說 12 回來，但想添加一個“查看更多”鏈接來顯示下一個系列 12。我知道你可以拆分陣列，但在我的情況下，我不確定我是否應該拆分它們而只是讓“查看更多”鏈接顯示回傳的物件陣列中的下 12 個。我想它正在創建一個函式，當您單擊鏈接時，該函式一次呼叫 12（或任何數字）或其他內容。希望這是有道理的。謝謝

發布組件（通過 JSON 回圈顯示發布）

import releases from "../data/releases.json";
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import '../main.css'

const Release = () => {
 //experimenting with splitting up array but not implemented yet
  function sliceIntoChunks(arr, chunkSize) {
    const res = [];
    for (let i = 0; i < arr.length; i  = chunkSize) {
      const chunk = arr.slice(i, i   chunkSize);
      res.push(chunk);
    }
    return res;
  }
  console.log(sliceIntoChunks(releases, 3));

  return (
    <Wrapper>
      <div className="release fadein">
        {releases.map((release, i) => (
          <div className="item" key={i}>
            <Link to={`/release/${release.id}`}>
              <img src={release.imageURL} alt={release.artist} />
            </Link>
          </div>
        ))}
         {/* Implement here to show the next 12 in the array*/}
        <a href="#"> See more...</a>
      </div>
    </Wrapper>
  )
}

Json 檔案（為簡潔起見顯示前 3 個物件，但會有 40 或 50 個將回傳）

[
  {
    "id": 0,
    "artistID": "ES",
    "imageURL": "../images/releases/cloudbursts.jpg",
    "title": "Cloud Bursts",
    "artist": "ERIC SHANS",
    "description": "One of the main 3Bridge Records bosses Eric Shans is back with his first original music of 2022, 'Cloud Bursts'. .",
    "buy": "https://www.beatport.com/release/ardour/3096956",
    "stream": "https://open.spotify.com/album/5vNYmx4uNY5fIPrOCR0cUa?si=lwCXwLGtSn6g6ZNToPZKRQ"
  },
  {
    "id": 1,
    "artistID": "ES",
    "imageURL": "../images/releases/archtypes.jpg",
    "title": "Archetypes",
    "description": "Mexico City based artist Eisenheim is back on 3Bridge with a killer EP called 'Archetypes'.n",
    "artist": "ERIC SHANS",
    "buy": "https://www.beatport.com/release/we-choose/1916121",
    "stream": "https://open.spotify.com/album/4cutoknbgciTGGpAYSZXfK?si=gsNvR6ytTN6KdrPORfSLOg"
  },
  {
    "id": 2,
    "artistID": "BG",
    "imageURL": "../images/releases/pingpong.jpg",
    "title": "Ping Pong",
    "artist": "SIMON SAMPLER & FISCHMEHL",
    "description": "We welcome Simon Sampler back to the label for a great 2 tracker featuring Austrian producer Fischmehl as well.",
    "buy": "https://www.beatport.com/release/cloud-bursts/3687306",
    "stream": "https://open.spotify.com/album/4cutoknbgciTGGpAYSZXfK?si=gsNvR6ytTN6KdrPORfSLOg"
  }
]

uj5u.com熱心網友回復：

建議使用一個簡單的按鈕，在單擊時向狀態添加額外的 12 個專案。使用.slice()陣列方法很容易完成：

import React from "react";

const STEP = 12;
const data = [...Array(100).keys()].map((id) => ({ id }));

export default function App() {
  const [items, setItems] = React.useState(data.slice(0, STEP));

  const loadMore = () => {
    setItems([...items, ...data.slice(items.length, items.length   STEP)]);
  };

  return (
    <div className="App">
      <ul>
        {items.map((item) => {
          return <li>{item.id}</li>;
        })}
      </ul>
      <button onClick={loadMore}>Load more</button>
    </div>
  );
}

uj5u.com熱心網友回復：

使用 usestate 鉤子擴展 Const [present ,setPresent]=useState(12) release.slice(0, present).map(()=> return div here) ) <a onClick={()=>setPresent (present 12 )}

看更多

標籤：javascript 反应 数组 目的

上一篇：如何將相同鍵的JavaScript物件動態組合到一個陣列中

下一篇：Javascript計算陣列中的物件