React Native this.'function'不是函數

Question

我處於學習React Native和Redux的過程中，在這裏有許多類似的問題，但我很難與我的問題聯繫起來。

當我在另一個方法中調用一個方法時，它會一直返回我this.'some函數'不是一個函數，我真的不知道該怎麼做。

下面是我的一些代碼..

import React, { Component } from 'react'; 
import { Text, StyleSheet, ScrollView } from 'react-native'; 
import { connect } from 'react-redux'; 
import Panel from '../components/panel'; 

class Orders extends Component { 
    displayItems(obj) { 
     console.log('itemArr', obj); 
     return obj.items.map(function(item){ 
      return (<Text>{item.quantity + ' ' + item.name}</Text>) 
     }); 
    } 

    renderContents() { 
     console.log('orders', this.props.orders); 
     if (!this.props.orders) { 
      return <Text>Loading...</Text>; 
     } 
     return this.props.orders.map(function(order) { 
       return (
        <Panel title={order.id} key={order.id}> 
         <Text> 
          Item: {this.displayItems(order)}{'\n'} 

         </Text> 
        </Panel> 
       ); 
     }); 
    } 

    render() { 
     return(
      <ScrollView style={styles.container}> 
       {this.renderContents()} 
      </ScrollView> 
     ); 
    } 
} 

我不知道爲什麼渲染方法內的功能不會導致任何錯誤，但在我的renderContents方法執行函數調用。

我欣賞任何建議來解決這個問題。

謝謝先進。

Answer 1

這是一個綁定問題。在JavaScript函數有自己的this背景下，除非明確地告訴別人，否則，所以當你

return this.props.orders.map(function(order) { 
    return (
    <Panel title={order.id} key={order.id}> 
     <Text>Item: {this.displayItems(order)}{'\n'}</Text> 
    </Panel>); 
}); 

this沒有指向你的類，但函數本身。只要做到以下

return this.props.orders.map((order) => { 
    return (
    <Panel title={order.id} key={order.id}> 
     <Text>Item: {this.displayItems(order)}{'\n'}</Text> 
    </Panel>); 
}); 

箭函數沒有自己的背景，所以這應該爲你工作。您也可以撥打bind，但我認爲箭頭功能解決方案更簡單。