首頁猿問收到錯誤“TypeEr...

收到錯誤“TypeError：results.map 不是函數”

JavaScript

回首憶惘然 2024-01-18 20:38:00

在 React 代碼中，當嘗試映射 API 的結果時，我無法獲取數據。這是供參考的代碼。應用程序.jsexport const AdminPanel = () => { const classes = useStyles(); const [results, setResults] = useState([]) const profileData = async () => { try { const res = await axios.get("https://randomuser.me/api/?results=10"); setResults(res) } catch(err) { console.log(err) }}useEffect(() => { profileData()}, []) return ( <TableContainer component={Paper}> <Table className={classes.table} aria-label="simple table"> <TableHead> <TableRow> <TableCell>First Name</TableCell> <TableCell align="right">Last Name</TableCell> <TableCell align="right">Address</TableCell> <TableCell align="right">Photo</TableCell> <TableCell align="right">Email</TableCell> <TableCell align="right">DOB</TableCell> </TableRow> </TableHead> <TableBody> {results.map((person) => { console.log('PERSON', person) })} </TableBody> </Table> </TableContainer> );}即使將結果聲明為數組，仍然會出現錯誤。我是否在某個地方弄錯了。什么是合適的解決方案？

查看完整描述

2 回答

子衿沉夜

TA貢獻1828條經驗獲得超3個贊

你快到了。您的 axios 調用需要稍微改變一下。以下是修復方法：

import React from "react";

import axios from "axios";

import "./styles.css";

export default function App() {

const [results, setResults] = React.useState([]);

const profileData = async () => {

try {

const res = await axios

.get("https://randomuser.me/api/?results=10")

.then((result) => result.data.results);

setResults(res)

} catch (err) {

console.log(err);

}

};

React.useEffect(() => {

profileData();

}, []);

return (

<h1>Hello CodeSandbox</h1>

<h2>Start editing to see some magic happen!</h2>

{results.map((person) => {

console.log("PERSON", person);

})}

</div>

);

}

注意這部分：

const res = await axios

.get("https://randomuser.me/api/?results=10")

.then((result) => result.data.results);

另請記住，console.log("PERSON", person);在返回函數內部實際上不會在頁面上呈現任何內容，它將打印到控制臺。只是想澄清這一點。

沙盒：https://codesandbox.io/s/exciting-shockley-9m5vj? file=/src/App.js

反對回復 2024-01-18

慕容708150

TA貢獻1831條經驗獲得超4個贊

setResults(res.results) 應該完成這項工作

反對回復 2024-01-18

2 回答
0 關注
243 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

收到錯誤“TypeError：results.map 不是函數”

收到錯誤“TypeError：results.map 不是函數”

2 回答

添加回答