尝试在表单提交后映射返回的数据。下一个JS
Trying to map through returned data after a form submit. NextJS
我目前正在玩几个游戏 API，我已经设置了一个简单的表单来发送带有查询的获取请求到与游戏对话的 API 路由服务器。
目前效果很好，但是如果我在提交表单后尝试通过响应进行映射，我会收到一条错误消息，指出映射不是函数 TypeError: stats.data.data.stats.all.map is not a function
问题截图
我已将组件的代码放在下面，非常感谢任何帮助。
import React from "react";
import axios from "axios";
import { VStack, Container, FormControl, FormLabel , Input, Button, Select, HStack } from "@chakra-ui/react";
const Index = () => {
const [data, setData] = React.useState([]);
const [name, setName] = React.useState("");
const [accountType, setAccountType] = React.useState("");
const [timeWindow, setTimeWindow] = React.useState("");
const [image, setImage] = React.useState("");
const [stats, setStats] = React.useState(null)
const [err, setErr] = React.useState(null)
const getuserData = async () => {
axios.get(`/api/getStats?name=${name}&accountType=${accountType}&timeWindow=${timeWindow}&image=${image}`, {
headers: {
Accept: "application/json",
},
})
.then((response) => {
setStats(response.data)
}
)
.then((response) => {
console.log('console log of prop', stats)
console.log('client side log', response.data);
console.log('client side log data.data', response.data.data);
console.log('client side repsonse log', response)
})
.catch((err) => {
setErr(err.message)
});
};
const handleSubmit = (e) => {
e.preventDefault();
getuserData();
};
console.log(stats)
return (
<React.Fragment>
<form onSubmit={handleSubmit}>
<FormControl>
<HStack>
<FormLabel >Enter Account Name: </FormLabel>
<Input
type="text"
name="name"
required
value={name}
placeholder="account name"
onChange={(e) => setName(e.target.value)}
/>
<FormLabel >Account Type: </FormLabel>
<Select
required
placeholder='Select Account Type'
onChange={(e) => setAccountType(e.target.value)}
>
<option value='epic'>PC</option>
<option value='psn'>Playstation</option>
<option value='xbl'>Xbox</option>
</Select>
<FormLabel >Time Played: </FormLabel>
<Select
required
placeholder='Select Window of Time Played'
onChange={(e) => setTimeWindow(e.target.value)}
>
<option value='season'>season</option>
<option value='lifetime'>lifetime</option>
</Select>
<FormLabel>Select Platform</FormLabel>
<Select
required
placeholder='Select The Platform You Play On!'
onChange={(e) => setImage(e.target.value)}
>
<option value='all'>All</option>
<option value='keyboardMouse '>Keyboard & Mouse</option>
<option value='gamepad'>Controller</option>
<option value='touch'>Mobile</option>
<option value='none'>None</option>
</Select>
</HStack>
</FormControl>
<Button type="submit" colorScheme="green" m="2">Search</Button>
</form>
{console.log('after form', stats)}
{console.log('status', stats && stats.data.status)}
{console.log('stats solo', stats && stats.data.data.stats.all.solo)}
<VStack>
<Container>
<img width="1000" height="1000" src={stats?.data.data.image} />
{/* {stats && stats.data.status.includes(200) ? (
<img width="1000" height="1000" src={stats?.data.data.image} />
) : (
<div>Error. Check your details are correct!</div>
)
} */}
{stats && stats.data.data.stats.all.map((stat =>
<code>{stat.solo.kills}</code>
))}
</Container>
</VStack>
</React.Fragment>
);
};
export default Index;
来自调试器的原始 json
// 我确实必须注释掉地图才能让响应恢复它。不确定是否也可以
{
"data": {
"data": {
"status": 200,
"data": {
"account": {
"id": "9a8cc59adfff4f61902a11141b8c1d0e",
"name": "notCarried"
},
"battlePass": {
"level": 23,
"progress": 68
},
"image": "https://cdn.fortnite-api.com/stats/v2/d5875d6387983eaec7cc6fbfac706c1b0eb0527f.png",
"stats": {
"all": {
"overall": {
"score": 143447,
"scorePerMin": 10.995,
"scorePerMatch": 26.153,
"wins": 175,
"top3": 57,
"top5": 104,
"top6": 98,
"top10": 623,
"top12": 253,
"top25": 1163,
"kills": 8291,
"killsPerMin": 0.635,
"killsPerMatch": 1.512,
"deaths": 5310,
"kd": 1.561,
"matches": 5485,
"winRate": 3.191,
"minutesPlayed": 13047,
"playersOutlived": 32795,
"lastModified": "2022-04-12T11:44:46Z"
},
"solo": {
"score": 52697,
"scorePerMin": 22.932,
"scorePerMatch": 16.545,
"wins": 115,
"top10": 623,
"top25": 1163,
"kills": 5067,
"killsPerMin": 2.205,
"killsPerMatch": 1.591,
"deaths": 3070,
"kd": 1.65,
"matches": 3185,
"winRate": 3.611,
"minutesPlayed": 2298,
"playersOutlived": 19072,
"lastModified": "2022-04-10T13:52:22Z"
},
"duo": {
"score": 22598,
"scorePerMin": 23.787,
"scorePerMatch": 25.249,
"wins": 22,
"top5": 104,
"top12": 253,
"kills": 1179,
"killsPerMin": 1.241,
"killsPerMatch": 1.317,
"deaths": 873,
"kd": 1.351,
"matches": 895,
"winRate": 2.458,
"minutesPlayed": 950,
"playersOutlived": 6608,
"lastModified": "2022-04-12T11:44:46Z"
},
"trio": null,
"squad": {
"score": 10224,
"scorePerMin": 22.226,
"scorePerMatch": 14.904,
"wins": 10,
"top3": 57,
"top6": 98,
"kills": 700,
"killsPerMin": 1.522,
"killsPerMatch": 1.02,
"deaths": 676,
"kd": 1.036,
"matches": 686,
"winRate": 1.458,
"minutesPlayed": 460,
"playersOutlived": 3203,
"lastModified": "2021-07-31T15:31:26Z"
},
"ltm": {
"score": 63786,
"scorePerMin": 6.637,
"scorePerMatch": 85.275,
"wins": 28,
"kills": 1404,
"killsPerMin": 0.146,
"killsPerMatch": 1.877,
"deaths": 720,
"kd": 1.95,
"matches": 748,
"winRate": 3.743,
"minutesPlayed": 9611,
"playersOutlived": 5667,
"lastModified": "2021-07-31T15:31:26Z"
}
},
"keyboardMouse": {
"overall": {
"score": 125068,
"scorePerMin": 12.034,
"scorePerMatch": 163.061,
"wins": 8,
"top3": 3,
"top5": 18,
"top6": 9,
"top10": 47,
"top12": 39,
"top25": 111,
"kills": 924,
"killsPerMin": 0.089,
"killsPerMatch": 1.205,
"deaths": 759,
"kd": 1.217,
"matches": 767,
"winRate": 1.043,
"minutesPlayed": 10393,
"playersOutlived": 30539,
"lastModified": "2022-04-12T11:44:46Z"
},
"solo": {
"score": 48884,
"scorePerMin": 22.939,
"scorePerMatch": 132.119,
"wins": 3,
"top10": 47,
"top25": 111,
"kills": 274,
"killsPerMin": 0.129,
"killsPerMatch": 0.741,
"deaths": 367,
"kd": 0.747,
"matches": 370,
"winRate": 0.811,
"minutesPlayed": 2131,
"playersOutlived": 17621,
"lastModified": "2022-04-10T13:52:22Z"
},
"duo": {
"score": 21964,
"scorePerMin": 23.848,
"scorePerMatch": 184.571,
"wins": 4,
"top5": 18,
"top12": 39,
"kills": 173,
"killsPerMin": 0.188,
"killsPerMatch": 1.454,
"deaths": 115,
"kd": 1.504,
"matches": 119,
"winRate": 3.361,
"minutesPlayed": 921,
"playersOutlived": 6349,
"lastModified": "2022-04-12T11:44:46Z"
},
"trio": null,
"squad": {
"score": 9973,
"scorePerMin": 22.361,
"scorePerMatch": 169.034,
"wins": 0,
"top3": 3,
"top6": 9,
"kills": 84,
"killsPerMin": 0.188,
"killsPerMatch": 1.424,
"deaths": 59,
"kd": 1.424,
"matches": 59,
"winRate": 0,
"minutesPlayed": 446,
"playersOutlived": 3092,
"lastModified": "2021-07-31T15:31:26Z"
},
"ltm": {
"score": 50105,
"scorePerMin": 6.991,
"scorePerMatch": 202.036,
"wins": 1,
"kills": 452,
"killsPerMin": 0.063,
"killsPerMatch": 1.823,
"deaths": 247,
"kd": 1.83,
"matches": 248,
"winRate": 0.403,
"minutesPlayed": 7167,
"playersOutlived": 5232,
"lastModified": "2021-07-31T15:31:26Z"
}
},
"gamepad": {
"overall": {
"score": 18379,
"scorePerMin": 6.925,
"scorePerMatch": 3.896,
"wins": 167,
"top3": 54,
"top5": 86,
"top6": 89,
"top10": 576,
"top12": 214,
"top25": 1052,
"kills": 7367,
"killsPerMin": 2.776,
"killsPerMatch": 1.561,
"deaths": 4551,
"kd": 1.619,
"matches": 4718,
"winRate": 3.54,
"minutesPlayed": 2654,
"playersOutlived": 2256,
"lastModified": "2019-10-17T04:40:24Z"
},
"solo": {
"score": 3813,
"scorePerMin": 22.832,
"scorePerMatch": 1.355,
"wins": 112,
"top10": 576,
"top25": 1052,
"kills": 4793,
"killsPerMin": 28.701,
"killsPerMatch": 1.703,
"deaths": 2703,
"kd": 1.773,
"matches": 2815,
"winRate": 3.979,
"minutesPlayed": 167,
"playersOutlived": 1451,
"lastModified": "2019-10-17T04:40:24Z"
},
"duo": {
"score": 634,
"scorePerMin": 21.862,
"scorePerMatch": 0.817,
"wins": 18,
"top5": 86,
"top12": 214,
"kills": 1006,
"killsPerMin": 34.69,
"killsPerMatch": 1.296,
"deaths": 758,
"kd": 1.327,
"matches": 776,
"winRate": 2.32,
"minutesPlayed": 29,
"playersOutlived": 259,
"lastModified": "2019-01-12T02:30:20Z"
},
"trio": null,
"squad": {
"score": 251,
"scorePerMin": 17.929,
"scorePerMatch": 0.4,
"wins": 10,
"top3": 54,
"top6": 89,
"kills": 616,
"killsPerMin": 44,
"killsPerMatch": 0.982,
"deaths": 617,
"kd": 0.998,
"matches": 627,
"winRate": 1.595,
"minutesPlayed": 14,
"playersOutlived": 111,
"lastModified": "2019-01-18T06:46:27Z"
},
"ltm": {
"score": 13681,
"scorePerMin": 5.598,
"scorePerMatch": 27.362,
"wins": 27,
"kills": 952,
"killsPerMin": 0.39,
"killsPerMatch": 1.904,
"deaths": 473,
"kd": 2.013,
"matches": 500,
"winRate": 5.4,
"minutesPlayed": 2444,
"playersOutlived": 435,
"lastModified": "2019-07-14T08:15:54Z"
}
},
"touch": null
}
}
}
},
"status": 200,
"statusText": "OK",
"headers": {
"connection": "keep-alive",
"content-encoding": "gzip",
"content-type": "application/json; charset=utf-8",
"date": "Tue, 12 Apr 2022 11:48:19 GMT",
"etag": "\"1270-feipp1fYiZBY8Zu4RV0p6SZKj8U\"",
"keep-alive": "timeout=5",
"transfer-encoding": "chunked",
"vary": "Accept-Encoding"
},
"config": {
"transitional": {
"silentJSONParsing": true,
"forcedJSONParsing": true,
"clarifyTimeoutError": false
},
"transformRequest": [
null
],
"transformResponse": [
null
],
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1,
"maxBodyLength": -1,
"headers": {
"Accept": "application/json"
},
"method": "get",
"url": "/api/getStats?name=notCarried&accountType=epic&timeWindow=lifetime&image=all"
},
"request": {}
}
.then((response) => {
debugger; // <- watch here what recieves in response data
setStats(response.data)
}
您收到错误的原因是因为您正在尝试映射一个数组，但您得到的结果是一个对象。
尝试将您尝试映射的结果包装在 Object.values();
中
let result = Object.values(response.data);
setStats(result);
另外，最好能像这样获取准确的数据：
let result = Object.values(response.data.data.data.stats.all);
setStats(result);
因此您的代码会因此变得更加清晰：
{stats && stats.map((stat =>
<code>{stat.solo.kills}</code>
))}
我目前正在玩几个游戏 API，我已经设置了一个简单的表单来发送带有查询的获取请求到与游戏对话的 API 路由服务器。
目前效果很好，但是如果我在提交表单后尝试通过响应进行映射，我会收到一条错误消息，指出映射不是函数 TypeError: stats.data.data.stats.all.map is not a function
问题截图
我已将组件的代码放在下面，非常感谢任何帮助。
import React from "react";
import axios from "axios";
import { VStack, Container, FormControl, FormLabel , Input, Button, Select, HStack } from "@chakra-ui/react";
const Index = () => {
const [data, setData] = React.useState([]);
const [name, setName] = React.useState("");
const [accountType, setAccountType] = React.useState("");
const [timeWindow, setTimeWindow] = React.useState("");
const [image, setImage] = React.useState("");
const [stats, setStats] = React.useState(null)
const [err, setErr] = React.useState(null)
const getuserData = async () => {
axios.get(`/api/getStats?name=${name}&accountType=${accountType}&timeWindow=${timeWindow}&image=${image}`, {
headers: {
Accept: "application/json",
},
})
.then((response) => {
setStats(response.data)
}
)
.then((response) => {
console.log('console log of prop', stats)
console.log('client side log', response.data);
console.log('client side log data.data', response.data.data);
console.log('client side repsonse log', response)
})
.catch((err) => {
setErr(err.message)
});
};
const handleSubmit = (e) => {
e.preventDefault();
getuserData();
};
console.log(stats)
return (
<React.Fragment>
<form onSubmit={handleSubmit}>
<FormControl>
<HStack>
<FormLabel >Enter Account Name: </FormLabel>
<Input
type="text"
name="name"
required
value={name}
placeholder="account name"
onChange={(e) => setName(e.target.value)}
/>
<FormLabel >Account Type: </FormLabel>
<Select
required
placeholder='Select Account Type'
onChange={(e) => setAccountType(e.target.value)}
>
<option value='epic'>PC</option>
<option value='psn'>Playstation</option>
<option value='xbl'>Xbox</option>
</Select>
<FormLabel >Time Played: </FormLabel>
<Select
required
placeholder='Select Window of Time Played'
onChange={(e) => setTimeWindow(e.target.value)}
>
<option value='season'>season</option>
<option value='lifetime'>lifetime</option>
</Select>
<FormLabel>Select Platform</FormLabel>
<Select
required
placeholder='Select The Platform You Play On!'
onChange={(e) => setImage(e.target.value)}
>
<option value='all'>All</option>
<option value='keyboardMouse '>Keyboard & Mouse</option>
<option value='gamepad'>Controller</option>
<option value='touch'>Mobile</option>
<option value='none'>None</option>
</Select>
</HStack>
</FormControl>
<Button type="submit" colorScheme="green" m="2">Search</Button>
</form>
{console.log('after form', stats)}
{console.log('status', stats && stats.data.status)}
{console.log('stats solo', stats && stats.data.data.stats.all.solo)}
<VStack>
<Container>
<img width="1000" height="1000" src={stats?.data.data.image} />
{/* {stats && stats.data.status.includes(200) ? (
<img width="1000" height="1000" src={stats?.data.data.image} />
) : (
<div>Error. Check your details are correct!</div>
)
} */}
{stats && stats.data.data.stats.all.map((stat =>
<code>{stat.solo.kills}</code>
))}
</Container>
</VStack>
</React.Fragment>
);
};
export default Index;
来自调试器的原始 json
// 我确实必须注释掉地图才能让响应恢复它。不确定是否也可以
{
"data": {
"data": {
"status": 200,
"data": {
"account": {
"id": "9a8cc59adfff4f61902a11141b8c1d0e",
"name": "notCarried"
},
"battlePass": {
"level": 23,
"progress": 68
},
"image": "https://cdn.fortnite-api.com/stats/v2/d5875d6387983eaec7cc6fbfac706c1b0eb0527f.png",
"stats": {
"all": {
"overall": {
"score": 143447,
"scorePerMin": 10.995,
"scorePerMatch": 26.153,
"wins": 175,
"top3": 57,
"top5": 104,
"top6": 98,
"top10": 623,
"top12": 253,
"top25": 1163,
"kills": 8291,
"killsPerMin": 0.635,
"killsPerMatch": 1.512,
"deaths": 5310,
"kd": 1.561,
"matches": 5485,
"winRate": 3.191,
"minutesPlayed": 13047,
"playersOutlived": 32795,
"lastModified": "2022-04-12T11:44:46Z"
},
"solo": {
"score": 52697,
"scorePerMin": 22.932,
"scorePerMatch": 16.545,
"wins": 115,
"top10": 623,
"top25": 1163,
"kills": 5067,
"killsPerMin": 2.205,
"killsPerMatch": 1.591,
"deaths": 3070,
"kd": 1.65,
"matches": 3185,
"winRate": 3.611,
"minutesPlayed": 2298,
"playersOutlived": 19072,
"lastModified": "2022-04-10T13:52:22Z"
},
"duo": {
"score": 22598,
"scorePerMin": 23.787,
"scorePerMatch": 25.249,
"wins": 22,
"top5": 104,
"top12": 253,
"kills": 1179,
"killsPerMin": 1.241,
"killsPerMatch": 1.317,
"deaths": 873,
"kd": 1.351,
"matches": 895,
"winRate": 2.458,
"minutesPlayed": 950,
"playersOutlived": 6608,
"lastModified": "2022-04-12T11:44:46Z"
},
"trio": null,
"squad": {
"score": 10224,
"scorePerMin": 22.226,
"scorePerMatch": 14.904,
"wins": 10,
"top3": 57,
"top6": 98,
"kills": 700,
"killsPerMin": 1.522,
"killsPerMatch": 1.02,
"deaths": 676,
"kd": 1.036,
"matches": 686,
"winRate": 1.458,
"minutesPlayed": 460,
"playersOutlived": 3203,
"lastModified": "2021-07-31T15:31:26Z"
},
"ltm": {
"score": 63786,
"scorePerMin": 6.637,
"scorePerMatch": 85.275,
"wins": 28,
"kills": 1404,
"killsPerMin": 0.146,
"killsPerMatch": 1.877,
"deaths": 720,
"kd": 1.95,
"matches": 748,
"winRate": 3.743,
"minutesPlayed": 9611,
"playersOutlived": 5667,
"lastModified": "2021-07-31T15:31:26Z"
}
},
"keyboardMouse": {
"overall": {
"score": 125068,
"scorePerMin": 12.034,
"scorePerMatch": 163.061,
"wins": 8,
"top3": 3,
"top5": 18,
"top6": 9,
"top10": 47,
"top12": 39,
"top25": 111,
"kills": 924,
"killsPerMin": 0.089,
"killsPerMatch": 1.205,
"deaths": 759,
"kd": 1.217,
"matches": 767,
"winRate": 1.043,
"minutesPlayed": 10393,
"playersOutlived": 30539,
"lastModified": "2022-04-12T11:44:46Z"
},
"solo": {
"score": 48884,
"scorePerMin": 22.939,
"scorePerMatch": 132.119,
"wins": 3,
"top10": 47,
"top25": 111,
"kills": 274,
"killsPerMin": 0.129,
"killsPerMatch": 0.741,
"deaths": 367,
"kd": 0.747,
"matches": 370,
"winRate": 0.811,
"minutesPlayed": 2131,
"playersOutlived": 17621,
"lastModified": "2022-04-10T13:52:22Z"
},
"duo": {
"score": 21964,
"scorePerMin": 23.848,
"scorePerMatch": 184.571,
"wins": 4,
"top5": 18,
"top12": 39,
"kills": 173,
"killsPerMin": 0.188,
"killsPerMatch": 1.454,
"deaths": 115,
"kd": 1.504,
"matches": 119,
"winRate": 3.361,
"minutesPlayed": 921,
"playersOutlived": 6349,
"lastModified": "2022-04-12T11:44:46Z"
},
"trio": null,
"squad": {
"score": 9973,
"scorePerMin": 22.361,
"scorePerMatch": 169.034,
"wins": 0,
"top3": 3,
"top6": 9,
"kills": 84,
"killsPerMin": 0.188,
"killsPerMatch": 1.424,
"deaths": 59,
"kd": 1.424,
"matches": 59,
"winRate": 0,
"minutesPlayed": 446,
"playersOutlived": 3092,
"lastModified": "2021-07-31T15:31:26Z"
},
"ltm": {
"score": 50105,
"scorePerMin": 6.991,
"scorePerMatch": 202.036,
"wins": 1,
"kills": 452,
"killsPerMin": 0.063,
"killsPerMatch": 1.823,
"deaths": 247,
"kd": 1.83,
"matches": 248,
"winRate": 0.403,
"minutesPlayed": 7167,
"playersOutlived": 5232,
"lastModified": "2021-07-31T15:31:26Z"
}
},
"gamepad": {
"overall": {
"score": 18379,
"scorePerMin": 6.925,
"scorePerMatch": 3.896,
"wins": 167,
"top3": 54,
"top5": 86,
"top6": 89,
"top10": 576,
"top12": 214,
"top25": 1052,
"kills": 7367,
"killsPerMin": 2.776,
"killsPerMatch": 1.561,
"deaths": 4551,
"kd": 1.619,
"matches": 4718,
"winRate": 3.54,
"minutesPlayed": 2654,
"playersOutlived": 2256,
"lastModified": "2019-10-17T04:40:24Z"
},
"solo": {
"score": 3813,
"scorePerMin": 22.832,
"scorePerMatch": 1.355,
"wins": 112,
"top10": 576,
"top25": 1052,
"kills": 4793,
"killsPerMin": 28.701,
"killsPerMatch": 1.703,
"deaths": 2703,
"kd": 1.773,
"matches": 2815,
"winRate": 3.979,
"minutesPlayed": 167,
"playersOutlived": 1451,
"lastModified": "2019-10-17T04:40:24Z"
},
"duo": {
"score": 634,
"scorePerMin": 21.862,
"scorePerMatch": 0.817,
"wins": 18,
"top5": 86,
"top12": 214,
"kills": 1006,
"killsPerMin": 34.69,
"killsPerMatch": 1.296,
"deaths": 758,
"kd": 1.327,
"matches": 776,
"winRate": 2.32,
"minutesPlayed": 29,
"playersOutlived": 259,
"lastModified": "2019-01-12T02:30:20Z"
},
"trio": null,
"squad": {
"score": 251,
"scorePerMin": 17.929,
"scorePerMatch": 0.4,
"wins": 10,
"top3": 54,
"top6": 89,
"kills": 616,
"killsPerMin": 44,
"killsPerMatch": 0.982,
"deaths": 617,
"kd": 0.998,
"matches": 627,
"winRate": 1.595,
"minutesPlayed": 14,
"playersOutlived": 111,
"lastModified": "2019-01-18T06:46:27Z"
},
"ltm": {
"score": 13681,
"scorePerMin": 5.598,
"scorePerMatch": 27.362,
"wins": 27,
"kills": 952,
"killsPerMin": 0.39,
"killsPerMatch": 1.904,
"deaths": 473,
"kd": 2.013,
"matches": 500,
"winRate": 5.4,
"minutesPlayed": 2444,
"playersOutlived": 435,
"lastModified": "2019-07-14T08:15:54Z"
}
},
"touch": null
}
}
}
},
"status": 200,
"statusText": "OK",
"headers": {
"connection": "keep-alive",
"content-encoding": "gzip",
"content-type": "application/json; charset=utf-8",
"date": "Tue, 12 Apr 2022 11:48:19 GMT",
"etag": "\"1270-feipp1fYiZBY8Zu4RV0p6SZKj8U\"",
"keep-alive": "timeout=5",
"transfer-encoding": "chunked",
"vary": "Accept-Encoding"
},
"config": {
"transitional": {
"silentJSONParsing": true,
"forcedJSONParsing": true,
"clarifyTimeoutError": false
},
"transformRequest": [
null
],
"transformResponse": [
null
],
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1,
"maxBodyLength": -1,
"headers": {
"Accept": "application/json"
},
"method": "get",
"url": "/api/getStats?name=notCarried&accountType=epic&timeWindow=lifetime&image=all"
},
"request": {}
}
.then((response) => {
debugger; // <- watch here what recieves in response data
setStats(response.data)
}
您收到错误的原因是因为您正在尝试映射一个数组，但您得到的结果是一个对象。
尝试将您尝试映射的结果包装在 Object.values();
let result = Object.values(response.data);
setStats(result);
另外，最好能像这样获取准确的数据：
let result = Object.values(response.data.data.data.stats.all);
setStats(result);
因此您的代码会因此变得更加清晰：
{stats && stats.map((stat =>
<code>{stat.solo.kills}</code>
))}