如何在React.js中按類別顯示產品

嗨，我是 React 的初學者 我正在使用 React.js 并嘗試從公共 API 顯示類別，它在我的應用程式中成功顯示現在我正在嘗試分別顯示每個類別的產品所以如果我點擊一個特定類別，該類別的所有產品將顯示在單獨的頁面上

應用程式.js

import React from 'react';
import './App.css';
import {BrowserRouter,Routes,Route} from "react-router-dom";
import Categories from './components/Categories';
import Items from './components/Items';
function App() {


  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" exact element={<Categories />}/>
          <Route path="/items" element={<Items />}/>
        </Routes>
        {/* <Items /> */}
      </BrowserRouter>
    </div>
  );
}

export default App;

分類.js

import React, { useState, useEffect } from 'react';
import '../style/Categories/categories.css'
import axios from 'axios'
const Categories = () => {

    const [categories, setCategories] = useState([])
    useEffect(() => {
        const getCategory = async () => {
            const res = await axios.get('https://api.publicapis.org/categories')
            setCategories(res.data.categories)
            console.log("res.data", res.data);
        }
        getCategory()
    }, [])
    return (
        <>
            <h1 style={{ textAlign: 'center' }}>All Categories</h1>
            <div className="category__wrapper">
                {categories.map(category =>
                    <div key={Math.random()} className="category__item">
                        <h2><a href="#" >{category}</a></h2>
                    </div>
                )}
            </div>
        </>
    )
}

export default Categories

專案.js

import React, { useState, useEffect } from 'react';
import axios from 'axios'
import '../style/Items/items.css'


const Items = () => {
    const [items, setItems] = useState([])
    useEffect(() => {
        const getItems = async () => {
            const result = await axios.get('https://api.publicapis.org/entries')
            setItems(result.data.entries)
            console.log("result.entries", result.data.entries);
        }
        getItems()
    }, [])
    return (
        <div className="item__wrapper">
            {items.map((item) => (
                <div class="ui card" key={item.API}>
                    <div class="content">
                        <div class="header">{item.API}</div>
                    </div>
                    <div class="content">
                        <p>{item.Description}</p>
                        <span>Category: {item.Category}</span>
                    </div>
                    <div class="extra content">
                        <button class="ui button">Show More</button>
                    </div>
                </div>
            ))}
        </div>
    )
}

export default Items

uj5u.com熱心網友回復：

在App.js 中

- <Route path="/items" element={<Items />}/>
  <Route path="/items/:categoryId" element={<Items />}/>

分類.js

  import { Link } from "react-router-dom"

- <h2><a href="#" >{category}</a></h2>

  <h2>
    <Link to={`/items/${category.id}`}>{category}</Link>
  </h2>

專案.js

const Items = () => {
   const { categoryId } = useParams()

  const [items, setItems] = useState([])

  useEffect(() => {
    const getItems = async () => {
-      const result = await axios.get('https://api.publicapis.org/entries')
       const result = await axios.get(`https://api.publicapis.org/entries/${categoryId}`)
      setItems(result.data.entries)
      console.log("result.entries", result.data.entries);
    }
    getItems()
  }, [])

uj5u.com熱心網友回復：

logancodemaker 的回答幾乎是正確的，但缺少一些東西。

基本上，您需要將 Category 發送到 Items 組件才能按類別過濾。

1-) 必須在 App.js 中更新專案路由以接受 url 引數。

<Route path="/items/:category" element={<Items />}/>

2-) 我們使用 Categories.js 中 react-router-dom 包中的 Link 組件來動態發送類別 url 引數。

<Link to={`/items/${category}`} >{category}</Link>

3-) 在 Items.js 中，我們按給定的類別名稱過濾產品。

    import { useParams } from 'react-router-dom';
    
    const {category} = useParams(); 
    
    useEffect(() => {
        const getItems = async () => {
            const result = await axios.get('https://api.publicapis.org/entries');

            const allItems = result.data.entries;
            const categoryItems = allItems.filter(item => item.Category === category);
            setItems(categoryItems)
        }
        getItems()
    }, [category])

標籤：javascript 反应 api

上一篇：如何顯示陣列的串列元素？

下一篇：Angular：如何以正確的方式構建組件架構？