javascript - TypeError : userData. map 不是一个函数，即使 userData 是一个数组

Question

我对 react 和尝试从 .json 文件(称为 userData.json)获取数据还很陌生，但是即使 userData 是一个数组，.map 也不起作用。

我已经检查过了

 console.log(Array.isArray(userData));
console.log(typeof userData);

它会返回“true”和“object”。

知道我做错了什么吗？这是整个代码片段:

import React from "react";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

class JsonTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userData: [],
      error: undefined
    };
  }
  componentDidMount() {
    fetch("../data/userData.json").then(
      result => {
        this.setState({
          userData: result
        });
      },
      error => {
        this.setState({ error });
      }
    );
  }
  render() {
    const { userData } = this.state;
    console.log(Array.isArray(userData));
    console.log(typeof userData);
    return (
      <Paper>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Name</TableCell>
              <TableCell>Foto</TableCell>
              <TableCell>Kategorie</TableCell>
              <TableCell>Kontaktinformation</TableCell>
              <TableCell>Job</TableCell>
              <TableCell>Notiz</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {userData.map(row => {
              return (
                <TableRow key={row.id}>
                  <TableCell component="th" scope="row">
                    {row.name}
                  </TableCell>
                  <TableCell>{row.image}</TableCell>
                  <TableCell>{row.category}</TableCell>
                  <TableCell>{row.contactInfo}</TableCell>
                  <TableCell>{row.job}</TableCell>
                  <TableCell>{row.note}</TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </Paper>
    );
  }
}

export default JsonTable;

Answer 1

but .map is not working even though userData is an array.

没有。 render() 被调用了两次。第一次渲染初始状态，userData 是一个空数组，你得出的结论是 userData 是一个数组。这一次，映射不会失败。现在数据被获取，你调用 setState 并将 userData 作为响应对象(这就是 fetch() 解析到的)，这一次， Array.isArray 将返回 false(但您可能还没有看到)，并且 .map 不存在。

要解析 fetch 调用的结果并获取数组，请使用 .json():

 fetch("../data/userData.json")
   .then(res => res.json())
   .then(result => /*...*/)