TypeError: userData.map не является функцией, даже если userData является массивом - PullRequest
Новая
       28

TypeError: userData.map не является функцией, даже если userData является массивом

0 голосов
/ 08 декабря 2018

Я совершенно новичок, чтобы реагировать и пытаться получить данные из файла .json (называемого userData.json), но .map не работает, даже если userData является массивом.

Я уже проверил этоделает 

 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;

Ответы [ 2 ]

0 голосов
/ 08 декабря 2018

Разве вы не забыли извлечь тело json? 

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

Еще одна вещь - на всякий случай - я бы обеспечил возможность того, что userData не является массивом. 

{Array.isArray(userData) && userData.map(row => { ... } }
0 голосов
/ 08 декабря 2018

, но .map не работает, даже если userData является массивом.

Нет.render() вызывается два раза.В первый раз начальное состояние отображается: userData - пустой массив, и вы пришли к выводу, что userData - это массив.На этот раз картография не подведет.Теперь данные извлекаются, и вы вызываете setState, где userData является объектом ответа (вот к чему fetch() разрешается), на этот раз Array.isArray вернет false (но вы как-то этого не видели), и .map не существует.

Чтобы проанализировать результат вызова fetch и получить массив, используйте .json(): 

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