Daten nicht angezeigt, wenn eine Ajax-Anfrage in React

Question

Ich versuche, einen Ajax-Aufruf mit einem React-Container (rein um die Daten zu holen und es an seine Kinder weitergeben), aber ich bekomme nichts.

Stattdessen erhalten Sie die folgenden Fehler:TypeError: Cannot read property 'map' of undefined. Was im Grunde sagt mir, dass die users entweder leer oder noch nicht definiert ist, oder?

Im Moment folge ich der folgenden Struktur UserListContainer (holt die Daten) =>UserList Component (zeigt die Daten als eine Stütze).

Userlist Container

// Container responsible only to fetch User data 
import React from 'react'; 
import UserList from '../../ui/components/users/userList.jsx'; 


export default class UserListContainer extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      users: [] 
     } 
    } 


    componentDidMount() { 
     $.ajax({ 
      // url: "../../users/users.json", 
      url: "https://gist.githubusercontent.com/dantesolis/267a298f3d6ac524bc2a7d80960a16b5/raw/7929bb23f1757b85adcead4eed3023cd3c7453df/users.json", 
      dataType: "json", 
      success: function(users) { 
       this.setState({users: users}); 
      }.bind(this) 
     }); 
    } 

    render() { 

     // const usr = this.props.user; 
     // let usrs = users_mockup ? users_mockup : this.props.users; 

     return (
      <UserList users={this.state.users} /> 
     ); 
    } 
} 

Userlist Component

import React from 'react'; 
import User from '../users/user.jsx'; 
// import { Link } from 'react'; 


export default class UserList extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    renderUser({name, _id}) { 
     return <li>{_id}-{name}</li> 
    } 


    render() { 
     return (
      <div className="main"> 
       <ul>{this.props.users.map(renderUser)}</ul> 
      </div> 
     ); 
    } 
} 

Hilfe sehr geschätzt wird. Danke

Answer 1

Das ist, weil usersundefined im success Rückruf ist. Dies kann passieren, weil die URL nicht korrekt funktioniert. Nach einem Blick at it scheint es, dass es Javascript zurückgibt und nicht json. Sie sollten versuchen, den Kommentar in der ersten Zeile zu entfernen, damit er json-kompatibel ist.