【发布时间】：2021-12-17 17:21:33
【问题描述】：
我整天都在搜索使用 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": "Pânză",
"brand": "Polo Ralph Lauren",
"description": "Teniși din pânză 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": "Lână",
"brand": "SELECTED",
"description": "Pulovăr din lână, în carouri, colecția toamnă-iarnă 2019, SELECTED."
},
{
"id": 7,
"name": "Pulovăr din lână",
"price": 160,
"currency": "LEI",
"image": "https://i.imgur.com/dTcMbHT.jpg",
"size": "L",
"colour": "Crem",
"material": "Lână",
"brand": "Massimo Dutti",
"description": "Pulovăr din lână 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 lână virgină",
"price": 210,
"currency": "LEI",
"image": "https://i.imgur.com/IXrZitQ.jpg",
"size": "L",
"colour": "Gri închis",
"material": "Lână virgină",
"brand": "Peek and Cloppenburg",
"description": "Haină lungă din lână 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 gânduri, 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>
);
}
}
【问题讨论】：