Question

我是一个非常新的反应者，它试图从.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

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

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

要解析.map调用的结果并获取数组，请使用fetch：

.json()

Answer 2

您还忘了提取json尸体吗？

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

另一件事-以防万一-我可以保证userData不是数组。

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

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

2 个答案: