Как исправить «TypeError: Невозможно прочитать свойство 'map' of undefined" в JavaScript? - PullRequest
Новая
       18

Как исправить «TypeError: Невозможно прочитать свойство 'map' of undefined" в JavaScript?

0 голосов
/ 23 июня 2019

Я извлекаю данные из API и затем отображаю их для отображения в таблицу. Но выборка не работает, и состояние остается неопределенным, когда страница загружена. Хотя API работает нормально и отправляет данные должным образом, я проверил его как в Postman, так и в своем браузере. Как решить эту проблему?

Страница зависала, и я немного погуглил и добавил условный рендеринг, чтобы предотвратить его падение. Но все еще не может решить проблему с извлечением данных и их отображением.

Вот код для страницы, которая не работает: 

import React, { Component } from "react";
import fetch from "isomorphic-unfetch";

export default class extends Component {
  static async getInitialProps() {
    const res = await fetch("https://linktoapi/path");
    const studentData = await res.json();
    return studentData;
  }
  componentWillMount() {
    this.setState({
      studentData: this.props.studentData
    });
  }

  render() {
    return (
      <table className="table is-striped is-fullwidth has-text-centered">
        <thead>
          <tr>
            <th>Name</th>
            <th>Class</th>
            <th>Section</th>
            <th>Batch</th>
            <th>Contact No.</th>
          </tr>
        </thead>
        <tbody>
          {this.state.studentData && this.state.studentData.map(studentDataRow => (
            <tr id={studentDataRow._id}>
              <td>{studentDataRow.name}</td>
              <td>{studentDataRow.class}</td>
              <td>{studentDataRow.section}</td>
              <td>{studentDataRow.batch}</td>
              <td>{studentDataRow.contact_no}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

Вот данные из API: 

[{"_id":"5d0cd67416c3a60017608a48","type":"student","name":"Samnan","contact_no":"9999","class":"123","section":"av","batch":"2002","__v":0},
{"_id":"5d0d1a7bfe72ac001775d778","type":"student","name":"as","contact_no":"0","class":"d","section":"r","batch":"a","__v":0},
{"_id":"5d0d1b24fe72ac001775d779","type":"student","name":"ab","contact_no":"0","class":"d","section":"afrgr","batch":"adsda","__v":0},
{"_id":"5d0d1b58259c5d6cd69acf3b","type":"student","name":"akash","contact_no":"567","class":"23","section":"h","batch":"2012","__v":0},
{"_id":"5d0ea1eb91eac20017f36739","type":"student","name":"as","contact_no":"08109209","class":"v","section":"qere","batch":"re","__v":0}]

Чтобы воспроизвести эту проблему локально: 

git clone https://github.com/Geektrovert/EduSys.git && cd EduSys
npm i
npm run dev

и затем перейдите к http://localhost:3000/students

1 Ответ

1 голос
/ 23 июня 2019

Я изменил несколько вещей, чтобы заставить его работать. getInitialProps, похоже, не звонили. Я переместил ваш вызов API в componentDidMount и использую состояние для хранения данных об ученике. 

import React, { Component } from "react";
import fetch from "isomorphic-unfetch";

export default class extends Component {

  constructor(props) {
    super(props);

    this.state = {
      studentData: []
    };
  }

  async componentDidMount() {
    const res = await fetch("https://edusys-yas.herokuapp.com/api/students");
    const studentData = await res.json();

    this.setState({ studentData });
  }
  render() {
    return (
      <table className="table is-striped is-narrow is-fullwidth">
        <thead>
          <tr>
            <th>Name</th>
            <th>Class</th>
            <th>Section</th>
            <th>Batch</th>
            <th>Contact No.</th>
          </tr>
        </thead>
        <tbody>
          {this.state.studentData.map(studentDataRow => (
            <tr>
              <td>{studentDataRow.name}</td>
              <td>{studentDataRow.class}</td>
              <td>{studentDataRow.section}</td>
              <td>{studentDataRow.batch}</td>
              <td>{studentDataRow.contact_no}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

result

...