我搜索了一整天以使用 React 鉤子從 JSON 檔案中添加一些類別，但到目前為止沒有運氣。我希望任何人都可以幫助我解決這個問題。這是 JSON 的外觀：
{
"shoes": {
"items": [
{
"id": 1,
"name": "Sneaker?i piele Massimo Dutti",
"price": 135,
"currency": "LEI",
"image": "https://i.imgur.com/Rz8lVQa.jpg",
"size": 45,
"colour": "Negru",
"material": "Piele",
"brand": "Massimo Dutti",
"description": "Sneaker?i din piele cu talp? ini?ial alb?, din colec?ia de toamn?-iarn? 2019, Massimo Dutti."
},
{
"id": 2,
"name": "Teni?i negri Polo Ralph Lauren",
"price": 100,
"currency": "LEI",
"image": "https://i.imgur.com/Og3Oh24.jpg",
"size": 45,
"colour": "Negru",
"material": "Panz?",
"brand": "Polo Ralph Lauren",
"description": "Teni?i din panz? cu talp? ini?ial alb?, din colec?ia de prim?var?-var? 2019, Fashion Days."
},
{
"id": 3,
"name": "Ghete din piele maro Massimo",
"price": 185,
"currency": "LEI",
"image": "https://i.imgur.com/zoqSu87.jpg",
"size": 45,
"colour": "Maro",
"material": "Piele",
"brand": "Massimo Dutti",
"description": "Ghete maro din piele, din colec?ia de toamn?-iarn? 2017, Massimo Dutti."
}
],
"image": "https://i.imgur.com/X0qldXO.jpg",
"name": "?nc?l??minte",
"description": "Ghete, pantofi, sneaker?i: fine?e garantat?!"
},
"sweaters": {
"items": [
{
"id": 4,
"name": "Pulov?r finu? cu guler",
"price": 95,
"currency": "LEI",
"image": "https://i.imgur.com/6afzuEr.jpg",
"size": "L",
"colour": "Maro",
"material": "Ca?mir",
"brand": "DS Damat",
"description": "Pulov?r din ca?mir, slim fit, colec?ia toamn?-iarn? 2019, DS Damat."
},
{
"id": 5,
"name": "Pulov?r multicolor",
"price": 105,
"currency": "LEI",
"image": "https://i.imgur.com/s0VytKc.jpg",
"size": "L",
"colour": "Multicolor",
"material": "Bumbac",
"brand": "McNeal",
"description": "Pulov?r multicolor, colec?ia toamn?-iarn? 209, McNeal."
},
{
"id": 6,
"name": "Pulov?r c?lduros ?i frumos",
"price": 165,
"currency": "LEI",
"image": "https://i.imgur.com/BWGgzlK.jpg",
"size": "L",
"colour": "Multicolor",
"material": "Lan?",
"brand": "SELECTED",
"description": "Pulov?r din lan?, ?n carouri, colec?ia toamn?-iarn? 2019, SELECTED."
},
{
"id": 7,
"name": "Pulov?r din lan?",
"price": 160,
"currency": "LEI",
"image": "https://i.imgur.com/dTcMbHT.jpg",
"size": "L",
"colour": "Crem",
"material": "Lan?",
"brand": "Massimo Dutti",
"description": "Pulov?r din lan? cu model, colec?ia toamn?-iarn? 2019, Massimo Dutti."
}
],
"image": "https://i.imgur.com/SZU7liE.jpg",
"name": "Pulovere",
"description": "Pulov?ra?e eleg?n?ele, slim, clas? superioar?."
},
"pants": {
"items": [
{
"id": 8,
"name": "Blugi bleumarin slim fit",
"price": 35,
"currency": "LEI",
"image": "https://i.imgur.com/VhpATO8.jpg",
"size": "34",
"colour": "Bleumarin ?nchis",
"material": "Blug",
"brand": "DS Damat",
"description": "Blugi bleumarin, slim fit, colec?ia prim?var?-var? 2019, DS Damat."
},
{
"id": 9,
"name": "Blugi negri slim fit",
"price": 40,
"currency": "LEI",
"image": "https://i.imgur.com/weiI07t.jpg",
"size": "34",
"colour": "Negru-gri",
"material": "Blug",
"brand": "DS Damat",
"description": "Blugi negri, slim fit, colec?ia toamn?-iarn? 2019, DS Damat."
}
],
"image": "https://i.imgur.com/srQCDRN.jpg",
"name": "Pantaloni/blugi",
"description": "Jean?i ?i pantaloni pentru baie?ii care ?i-o ard patroni!"
},
"jackets": {
"items": [
{
"id": 10,
"name": "Hain? lung? din lan? virgin?",
"price": 210,
"currency": "LEI",
"image": "https://i.imgur.com/IXrZitQ.jpg",
"size": "L",
"colour": "Gri ?nchis",
"material": "Lan? virgin?",
"brand": "Peek and Cloppenburg",
"description": "Hain? lung? din lan? virgin?, colec?ia toamn?-iarn? 2018, Peek and Cloppenburg."
},
{
"id": 11,
"name": "Geac? bleumarin cu glug? deta?abil?",
"price": 250,
"currency": "LEI",
"image": "https://i.imgur.com/eCZd7PU.jpg",
"size": "L",
"colour": "Bleumarin",
"material": "Poliester",
"brand": "DS Damat",
"description": "Geac? bleumarin cu glug? deta?abil?, colec?ia toamn?-iarn? 2019, DS Damat."
}
],
"image": "https://i.imgur.com/81I6Oab.jpg",
"name": "Geci/Haine",
"description": "Confortabile, c?lduroase ?i nu ar??i ca un cartof!"
},
"tshirts": {
"items": [
{
"id": 12,
"name": "Tricou ?n dungi",
"price": 90,
"currency": "LEI",
"image": "https://i.imgur.com/BWvzCwB.jpg",
"size": "L",
"colour": "Multicolor",
"material": "Bumbac",
"brand": "Lacoste",
"description": "Tricou ?n dungi, colec?ia prim?var?-var? 2019, Lacoste."
},
{
"id": 13,
"name": "Tricou de ping pong",
"price": 110,
"currency": "LEI",
"image": "https://i.imgur.com/4BbF4TO.jpg",
"size": "L",
"colour": "Ro?u",
"material": "Poliester",
"brand": "Li Ning",
"description": "Tricou de ping pong cu imprimeu cu dragon, purtat de jucatorii na?ionalei chinei ?n 2013."
},
{
"id": 14,
"name": "Tricou original BVB cu autograf",
"price": 1909,
"currency": "LEI",
"image": "https://i.imgur.com/etIsbHV.jpg",
"size": "L",
"colour": "Galben-Negru",
"material": "Poliester",
"brand": "Puma",
"description": "Tricoul purtat de Borussia Dortmund ?n sezonul competi?ional 2018-2019, cu numarul 7 ?i numele 'SANCHO'. Tricoul este semnat de portarul Borussiei, Roman Burki."
}
],
"image": "https://i.imgur.com/l27WtFL.jpg",
"name": "Tricouri",
"description": "?i de b?ie?eal? ?i de sport."
},
"accesories": {
"items": [
{
"id": 15,
"name": "Fular TJ cu dou? fe?e",
"price": 85,
"currency": "LEI",
"image": "https://i.imgur.com/rSVUiLO.jpg",
"size": "Universal",
"colour": "Gri-Bleumarin",
"material": "Ca?mir",
"brand": "Trussardi Jeans",
"description": "Fular cu imprimeu, din colec?ia toamn?-iarn? 2018, Trussardi Jeans."
},
{
"id": 16,
"name": "M?nu?i din piele",
"price": 60,
"currency": "LEI",
"image": "https://i.imgur.com/LbjGaZ1.jpg",
"size": "L",
"colour": "Negru",
"material": "Piele",
"brand": "DS Damat",
"description": "M?nu?i din piele, cu model, din colec?ia toamn?-iarn? 2018, DS Damat."
}
],
"image": "https://i.imgur.com/qw3wDj8.jpg",
"name": "Accesorii",
"description": "Fulare, c?ciuli, m?nu?i: nu mai sta pe ganduri, cump?r?-le acu?i!"
}
我設法用狀態映射物件，但我想通過使用鉤子來做到這一點。誰能幫我重構代碼以相同的方式作業但使用鉤子？
import products from '../utils/products.json';
import HomeCategory from '../components/HomeCategory';
class Home extends React.Component{
constructor() {
super();
this.state = {
categories: []
}
}
componentDidMount() {
const categories = Object.keys(products);
this.setState({categories});
}
render() {
return(
<div className="container-fluid container-min-max-width">
<div className="row">
{this.state.categories.map((category, index) =>
<HomeCategory
key={index}
route={category}
name={products[category].name}
description={products[category].description}
image={products[category].image}
/>
)}
</div>
</div>
);
}
}
uj5u.com熱心網友回復：
看起來你不需要狀態。您可以categories移出您的組件（因為 json 不會改變并且不依賴于任何東西），只需使用此變數進行迭代即可。
import products from '../utils/products.json'
import HomeCategory from '../components/HomeCategory'
const categories = Object.keys(products)
const Home = () => {
return (
<div className="container-fluid container-min-max-width">
<div className="row">
{categories.map((category, index) => (
<HomeCategory
key={index}
route={category}
name={products[category].name}
description={products[category].description}
image={products[category].image}
/>
))}
</div>
</div>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/346593.html
上一篇：為航點位置和鏈接創建json