Reagieren - Übergeben von Requisiten an 'ES6 extends' Komponenten und die korrekte Verwendung von 'bind'

Question

Ich versuche einen einfachen Posteingang zu erstellen, der einen API-Aufruf macht und ein json-Objekt zurückgibt, das eine Liste von Nachrichten enthält. Dies wird dann über Requisiten an die 'InboxList' und dann 'InboxItem' Komponenten übergeben. Wie auch immer, ich kämpfe um Requisiten, um jeden Gegenstand rendern zu können.

Ich erhalte auch einen Fehler bei der Verwendung von bind (this), die folgende ist.

index.js:28 Uncaught (in promise) TypeError: (intermediate value).bind is not a function(…) 

Ich glaube, ich brauche wegen es6 Syntax in meiner componentDidMount Methode zu binden, aber ich verstehe nicht, was der Fehler bezieht. Fwiw die JSON-Daten kommen erfolgreich zurück.

auf diese alle führt die meisten würden

geschätzt

export default class Inbox extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     messages: [], 
    }; 
    } 

    componentDidMount() { 
    this.serverRequest = axios.get('/api/messages') 
     .then(res => { 
     console.log(res.data); 
     }) 
     .catch(res => { 
     if (res instanceof Error) { 
      console.log(res.message); 
     } else { 
      console.log(res.data); 
     } 
     this.setState({ 
      messages: res.data, 
     }.bind(this)); 
     }); 
    } 

    render() { 
    return (
     <div> 
     <InboxHeader /> 
     <InboxList messages={this.state.messages} /> 
     </div> 
    ); 
    } 
} 

export default class InboxList extends Component { 
    render() { 
    return (
     <ul className="dm-inbox__list"> 
     {this.props.messages.map(message => 
      <InboxItem message={message} /> 
     )} 
     </ul> 
    ); 
    } 
} 

Answer 1

dies unten für Sie http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/ Ein Fix für weitere Informationen lesen. keine Notwendigkeit, das Versprechen zu binden https://www.toptal.com/javascript/10-most-common-javascript-mistakes

xport default class Inbox extends Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     messages: [], 
 
    }; 
 
    } 
 

 
    componentDidMount() { 
 
    //serverRequest remove it 
 
    //this.serverRequest = axios.get('/api/messages') 
 
     
 
     axios.get('/api/messages') 
 
     .then((response)=>{ 
 
      console.log(response); 
 
      if(response.status===200){ 
 
      return response.data; 
 
      } else { 
 
      throw new Error("Server response wasn't ok"); 
 
      } 
 

 
     }) 
 
     .then((responseData)=>{ 
 
      this.setState({messages:responseData}); 
 
     }).catch((error)=>{ 
 
      
 
     }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <InboxHeader /> 
 
     //the messages array might be still empty cause the network call is async so do a check in the inbox list 
 
     <InboxList messages={this.state.messages} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default class InboxList extends Component { 
 
    render() { 
 
    //check if null or empty if not yet resolved show loading eg spinner 
 
    if(!this.props.messages){ 
 
     return <div>loading....</div>; 
 
    } 
 
    return (
 
     <ul className="dm-inbox__list"> 
 
     {this.props.messages.map(message => 
 
      <InboxItem message={message} /> 
 
     )} 
 
     </ul> 
 
    ); 
 
    } 
 
}

import React, {Component} from 'react'; 
 

 
export const fetchResource = msg => WrappedComponent => 
 
    class extends Component { 
 
    constructor(props){ 
 
     super(props); 
 

 
     this.state = { 
 
     resource: null, 
 
     msg: null 
 
     }; 
 
    } 
 

 
    componentDidMount(){ 
 
     this.setState({msg}) 
 
     axios.get('https://api.github.com/users/miketembos/repos') 
 
     .then((response)=>{ 
 
      console.log(response); 
 
      if(response.status===200){ 
 
      return response.data; 
 
      } else { 
 
      throw new Error("Server response wasn't ok"); 
 
      } 
 

 
     }) 
 
     .then((responseData)=>{ 
 
      this.setState({resource:responseData}); 
 
     }).catch((error)=>{ 
 
      this.props.history.pushState(null, '/error'); 
 
     }); 
 
    } 
 

 
    render(){ 
 
     const {resource} = this.state 
 
     return <Posts {...this.props} {...resources } /> 
 
    } 
 
    }