TypeError：即使 userData 是数组，userData.map 也不是函数

Posted 2023-02-22

【中文标题】TypeError：即使 userData 是数组，userData.map 也不是函数

【英文标题】：TypeError: userData.map is not a function even though userData is an array

【发布时间】：2019-05-10 00:05:24

【问题描述】：

我对做出反应并尝试从 .json 文件（称为 userData.json）中获取数据非常陌生，但是即使 userData 是一个数组，.map 也无法正常工作。

我已经检查过了

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

它会回馈“真实”和“对象”。

知道我做错了什么吗？ 以下是截取的全部代码：

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;

【问题讨论】：

result 是什么？

在我的生活中没有使用过 fetch，但显然，您正在获取 json。你不应该使用一些.json() 方法将json转换为数组吗？

【参考方案1】：

但即使 userData 是一个数组，.map 也不起作用。

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

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

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

【参考方案2】：

你是不是忘了提取json的正文？

fetch("../data/userData.json")
  .then(
     (result) => result.json()
  )
     .then((userData) => 
        this.setState(
           userData,
        );
     )

另一件事——以防万一——我会确保userData 不是数组。

Array.isArray(userData) && userData.map(row =>  ...  

【讨论】：

json() 返回一个承诺？

@JonasWilms 是的，你是对的。忘了第二个then。

关于第二部分：我宁愿让setState neber 被非数组userData 调用。

@JonasWilms 对于后代来说，这只是一个提示