收到错误“TypeError：results.map 不是函数”

Question

在 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>  );}即使将结果声明为数组，仍然会出现错误。我是否在某个地方弄错了。什么是合适的解决方案？

Answer 1

你快到了。您的 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 (

    <div className="App">

      <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

Answer 2

setResults(res.results) 应该完成这项工作