2 回答

TA貢獻1772條經驗 獲得超8個贊
這取決于您的設計。您可以在同一屏幕上顯示項目的任務,或者您可以有一個單獨的頁面來這樣做。此外,由于您沒有處理這些數據的后端服務,因此在如何處理狀態方面沒有太多可供選擇的選項。
如果要在同一頁面中顯示任務,則必須將狀態修改為與項目變量非常相似:
state={
{
"id": 1,
"name": "Fifa19",
'tasks': [
{ id: "1", name: 'dise?ar', "progress": 10 },
{ id: "2", name: 'trabajar', "progress": 20 },
{ id: "3", name: 'construir', "progress": 30 },
{ id: "4", name: 'pensar', "progress": 40 },
{ id: "5", name: 'rehacer', "progress": 50 },
]
},
{
"id": 2,
"name": "StarWars",
'tasks': [
{ id: "5", name: 'dise?ar', "progress": 10 },
{ id: "6", name: 'trabajar', "progress": 20 },
{ id: "7", name: 'construir', "progress": 30 },
{ id: "8", name: 'pensar', "progress": 40 },
{ id: "9", name: 'rehacer', "progress": 50 },
]
},
{
"id": 3,
"name": "Pocoyo",
'tasks': [
{ id: "10", name: 'dise?ar', "progress": 10 },
{ id: "11", name: 'trabajar', "progress": 20 },
{ id: "12", name: 'construir', "progress": 30 },
{ id: "13", name: 'pensar', "progress": 40 },
{ id: "14", name: 'rehacer', "progress": 50 },
]
},
{
"id": 4,
"name": "Doraemon",
'tasks': [
{ id: "15", name: 'dise?ar', "progress": 10 },
{ id: "16", name: 'trabajar', "progress": 20 },
{ id: "17", name: 'construir', "progress": 30 },
{ id: "18", name: 'pensar', "progress": 40 },
{ id: "19", name: 'rehacer', "progress": 50 },
]
},
{
"id": 5,
"name": "Lineage 3",
'tasks': [
{ id: "20", name: 'dise?ar', "progress": 10 },
{ id: "21", name: 'trabajar', "progress": 20 },
{ id: "22", name: 'construir', "progress": 30 },
{ id: "23", name: 'pensar', "progress": 40 },
{ id: "24", name: 'rehacer', "progress": 50 },
]
}
}
或者,如果您希望您的應用程序單獨處理它,則需要使用 react-router 將路由映射到其他組件并傳遞 props 以顯示您想要的數據。類似的東西:
<Route
path='/tasks'
render={(props) => <Tasks{...props}/>}
/>
在這種情況下,任務將是一個功能性/啞組件,因為它僅用于顯示數據,并且只有在用戶單擊項目或您可能想要觸發的任何事件時才會顯示。
添加回答
舉報