React - 將道具傳遞給'ES6 extends'組件，並正確使用'bind'

Question

我試圖創建一個簡單的收件箱，它使api調用並返回包含消息列表的json對象。然後通過道具傳遞給'InboxList'，然後'InboxItem'組件。但是，我正在努力讓道具渲染每個項目。

我在使用bind（this）時也收到錯誤，如下所示。

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

我認爲我需要我的componentDidMount方法中的綁定由於ES6語法，但我不明白的錯誤指。 Fwiw json數據成功迴歸。

對此有何線索將是非常讚賞

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

閱讀更多信息http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/ 下面爲你修復。無需綁定到承諾 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 } /> 
 
    } 
 
    }