- 首先这是我的api数据数据。
{
"code": 200,
"message": "Request fulfilled, document follows",
"data": [
{
"sn": "ACC-LEW-1JY1-J4X2",
"created_on": "2022-11-12T07:42:26.531786Z",
"owner": "devtest01",
"toy_user_type": 1,
"shared_status": "Owned",
"product_data": {
"id": 179,
"product_skuid": "any-name",
"variant_id": "any-id",
"product_name": "any-product-name",
"product_type_val": "car-toy",
"product_category_slug": "stunt-car",
"desc": null,
},
"attribute_data": {
"toy_distance_travelled": "0",
"toy_time_played": "0",
"toy_last_updated": "0",
"toy_donuts": "0",
"toy_rash_drives": "0",
"toy_smooth_drives": "0",
"toy_top_boost": "0",
"toy_tank_size": "0",
"toy_draft_collector": "0",
"toy_acceleration": "0",
"toy_braking": "0",
"toy_name": "",
"toy_last_played": "",
"toy_experience": "0",
"toy_drifts": "0",
"toy_top_speed": "0",
"drifts": "0",
"toy_last_maintainence_distance": "0"
},
"game_attribute_data": [
{
"attr_key": "td_distance_travelled",
"value": 21,
"sync_version": 3
},
{
"attr_key": "td_time_played",
"value": 8,
"sync_version": 3
},
{
"attr_key": "td_drifts_completed",
"value": 3,
"sync_version": 3
}
]
},
],
"error": null,
"server_time": "2022-11-21T12:57:44.319Z"
}
我想访问game_attribute_data的数据。我试图使用地图功能，但我无法获得数据。
这是我在React.js中使用fetch方法的api调用
const allToysData = async () => {
await fetch(
`URL`,
{
method: "GET",
headers: {
Authorization: "token"
},
redirect: "follow"
}
)
.then(response => response.json())
.then(data => {
const toysdata = data.data;
const updatedToysData = toysdata.map(
(x: {
created_on: any;
owner: any;
shared_status: any;
sn: any;
attribute_data: any;
product_data: any;
game_attribute_data: any;
}) => ({
created_on: x.created_on,
owner: x.owner,
shared_status: x.shared_status,
sn: x.sn,
toy_drifts: x.attribute_data.toy_drifts,
toy_time_played: x.attribute_data.toy_time_played,
toy_last_played: x.attribute_data.toy_last_played,
toy_last_maintainence_distance: x.attribute_data.toy_last_maintainence_distance,
product_skuid: x.product_data.product_skuid,
product_image_1x: x.product_data.data.product_image_1x,
game_attribute_data: x.game_attribute_data.map(x => x),
})
);
const result = updatedToysData.map(x => x.game_attribute_data);
setToyAttribute(updatedToysData);
setArrToys(updatedToysData);
})
// eslint-disable-next-line no-console
.catch(error => console.log(`Error: ${error}`));
};
- 我想在一个表中显示game_attribute_data的数据。我应该如何访问React.js中的数据?
我已经尝试使用地图函数获取数据，但数据没有在表中呈现，所以请告诉我我的错误可能在哪里。
{
data.data
.map((item)=>item.game_attribute_data)
.map((game_attribute_data)=>(game_attribute_data)
.map((value,key)=>{
return <tr key={key}>
<td>{value.attr_key}</td>
<td>{value.value}</td>
<td>{value.sync_version}</td>
</tr>
}))
}
下面是代码片段。全页查看
// Get a hook function
const {useState} = React;
const Example = ({title}) => {
const [data,setData] = useState({
"code": 200,
"message": "Request fulfilled, document follows",
"data": [
{
"sn": "ACC-LEW-1JY1-J4X2",
"created_on": "2022-11-12T07:42:26.531786Z",
"owner": "devtest01",
"toy_user_type": 1,
"shared_status": "Owned",
"product_data": {
"id": 179,
"product_skuid": "any-name",
"variant_id": "any-id",
"product_name": "any-product-name",
"product_type_val": "car-toy",
"product_category_slug": "stunt-car",
"desc": null,
},
"attribute_data": {
"toy_distance_travelled": "0",
"toy_time_played": "0",
"toy_last_updated": "0",
"toy_donuts": "0",
"toy_rash_drives": "0",
"toy_smooth_drives": "0",
"toy_top_boost": "0",
"toy_tank_size": "0",
"toy_draft_collector": "0",
"toy_acceleration": "0",
"toy_braking": "0",
"toy_name": "",
"toy_last_played": "",
"toy_experience": "0",
"toy_drifts": "0",
"toy_top_speed": "0",
"drifts": "0",
"toy_last_maintainence_distance": "0"
},
"game_attribute_data": [
{
"attr_key": "td_distance_travelled",
"value": 21,
"sync_version": 3
},
{
"attr_key": "td_time_played",
"value": 8,
"sync_version": 3
},
{
"attr_key": "td_drifts_completed",
"value": 3,
"sync_version": 3
}
]
},
],
"error": null,
"server_time": "2022-11-21T12:57:44.319Z"
})
return (
<table >
<thead>
<tr>
<th>Attr Key</th>
<th>Value</th>
<th>Sync Version</th>
</tr>
</thead>
<tbody>
{
data.data
.map((item)=>item.game_attribute_data)
.map((game_attribute_data)=>(game_attribute_data)
.map((value,key)=>{
console.log(value)
return <tr key={key}>
<td>{value.attr_key}</td>
<td>{value.value}</td>
<td>{value.sync_version}</td>
</tr>
}))
}
</tbody>
</table>
);
};
// Render it
ReactDOM.createRoot(
document.getElementById("root")
).render(
<Example title="Example using Hooks:" />
);<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>根据你上面的最新评论，你只是在寻求帮助获得&将game_attribute_data与API响应的其余部分分开存储，对吗?如果是这样，我建议这样做:
- 创建一个新的状态变量来存储这些数据。例:
const [gameAttribData, setGameAttribData] = useState([]);
- 在您的
allToysData函数中，而不是通过API响应数据进行映射，我可能会创建几个变量(一个用于您最终要设置的每个唯一状态变量)，循环遍历响应数据(使用.forEach)，并为您查看的每个元素更新每个变量。game_attribute_data示例:
.then(data => {
const newGameAttribData = [];
// Loop through API response data
data.data.forEach((x: {
created_on: any;
owner: any;
shared_status: any;
sn: any;
attribute_data: any;
product_data: any;
game_attribute_data: any;
}) => {
// Add this element's data to arrays
newGameAttribData.push(x.game_attribute_data);
});
// Update your state variables
setGameAttribData(newGameAttribData);
});
现在您应该能够在这个函数之外访问gameAttribData，以便您可以将其呈现到屏幕上。希望你能适应上面的代码为您的使用(我不确定你到底想要如何渲染它到屏幕)。