Javascript TypeError:userData.map不是函数，即使userData是数组

我还不太熟悉如何反应并尝试从.json文件（称为userData.json）获取数据，但是即使userData是一个数组，.map也不起作用

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

我已经做了检查

 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;

从“React”导入React；
从“@物料界面/核心/表格”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
类JsonTable扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户数据：[]，
错误：未定义
};
}
componentDidMount（）{
获取（“../data/userData.json”）。然后(
结果=>{
这是我的国家({
用户数据：结果
});
},
错误=>{
this.setState（{error}）；
}
);
}
render（）{
const{userData}=this.state；
log（Array.isArray（userData））；
console.log（用户数据的类型）；
返回(
名称
福托
卡蒂戈里
康塔克汀组
工作
诺蒂斯
{userData.map（行=>{
返回(
{row.name}
{row.image}
{row.category}
{row.contactInfo}
{row.job}
{row.note}
);
})}
);
}
}
导出默认JsonTable；

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

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

否。

render（）

会被调用两次。在第一次呈现初始状态时，

userData

是一个空数组，您可以得出结论，

userData

是一个数组。这一次，映射不会失败。现在数据被获取，您调用

setState

，而

userData

是一个响应对象（这就是

fetch（）

的解析），这次，

Array.isArray

将返回

false

（但您不知怎的还没有看到），并且

.map

不存在

要分析

fetch

调用的结果并获取数组，请使用

.json（）

：

---

难道你没有忘记提取

json

正文吗

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

另一件事——以防万一——我将确保

userData

不是数组的可能性

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

---

什么是

result

？在我的生活中没有使用过fetch，但是很明显，您正在获取json。您不应该使用一些

.json（）

方法将json转换为数组吗？

json（）

返回一个承诺？@jonaswillms是的，您是对的。忘了第二个

然后

。关于第二个部分：我宁愿让

设置状态

内伯用一个非数组

用户数据

@jonaswillms被调用，这对后代来说是一个提示