2016-02-21 64 views
0

我试图开发我的第一反应原生应用程序,遵循官方教程。 我做了一个视图包含自定义列表视图,这是代码应用程序崩溃行单击 - 反应原生

_renderRow(data :Array<any>, sectionID: number ,rowID: number) { 
    return (
     <TouchableHighlight 
     onPress={()=>this.goToDetails(rowID)}> //This is Line 121 
     <View> 
      <View style={styles.row}> 
      <Text style={styles.text}> 
       {data.description} 
      </Text> 
      </View> 
      <View style={styles.separator} /> 
     </View> 
     </TouchableHighlight> 
    ); 
    } 

    goToDetails(c:number){ 
    ToastAndroid.show('pressed' , ToastAndroid.SHORT); 
    } 

    render(){ 
    return(
    <View style={styles.container}> 
     <Text style={styles.text}>Welcome {this.props.username}</Text> 

     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={this._renderRow} 
     /> 
    </View> 
)} 

但应用程序崩溃,当我点击ListView中的行给我这个错误

无法读取属性“goToDetails”空的

这是错误的屏幕

enter image description here

编辑1:

我的数据源是googleAPI自动完成的结果,我现在显示的描述只是

var API_URL = 'https://maps.googleapis.com/maps/api/place/autocomplete/json?input=Amoeba&types=establishment&location=37.76999,-122.44696&radius=500&key=API_KEY' 


constructor(props){ 
    super(props); 
    ToastAndroid.show('constructor' , ToastAndroid.SHORT); 
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     dataSource: ds.cloneWithRows([]), 
    } 
    } 

    componentDidMount() { 
    this.search(''); 
    } 

    search(query: string) { 
    fetch(API_URL) 
     .then((response) => response.json()) 
     .catch((error) => { 
     LOADING[query] = false; 
     this.setState({ 
      dataSource: this.getDataSource([]), 
      isLoading: false, 
     }); 
     }) 
     .then((responseData) => { 
     LOADING[query] = false; 
     this.setState({ 
      isLoading: false, 
      dataSource: this.state.dataSource.cloneWithRows(responseData.predictions), 
     }); 
     }) 
     .done(); 
    } 

EDIT2: JSON结果:

{ 
    "predictions" : [ 
     { 
     "description" : "Amoeba Music, Haight Street, San Francisco, CA, United States", 
     "id" : "2358a6f0884520d5b51391c0214b682a20921f0b", 
     "matched_substrings" : [ 
      { 
       "length" : 6, 
       "offset" : 0 
      } 
     ], 
     "place_id" : "ChIJ5YQQf1GHhYARPKG7WLIaOko", 
     "reference" : "CoQBdQAAADveEtFRYRS9MzktLdkFH7CJcbL9axM2ns3Iahw4NGnNcsdWVesUtEC7PQb2_l2yXiFU5QTqMIi57SzM2DPV4GBuSaEPm0PuvuHjbv_r9AW-14Mm1UE8d8LIrG9z-hG36MrWxhAckU6q0kV38r3RcsvYNve3UXQhbW2b-Rpu19ISEhCS9-5TUg3hkmk7pSCmR9d4GhSnihEnd4ccfzDO5zqjCj6WOuuUIA", 
     "terms" : [ 
      { 
       "offset" : 0, 
       "value" : "Amoeba Music" 
      }, 
      { 
       "offset" : 14, 
       "value" : "Haight Street" 
      }, 
      { 
       "offset" : 29, 
       "value" : "San Francisco" 
      }, 
      { 
       "offset" : 44, 
       "value" : "CA" 
      }, 
      { 
       "offset" : 48, 
       "value" : "United States" 
      } 
     ], 
     "types" : [ "establishment" ] 
     }, 
     { 
     "description" : "Amoeba Music, Telegraph Avenue, Berkeley, CA, United States", 
     "id" : "8a40726d6983c2b9f922b0eb72175351527f8f52", 
     "matched_substrings" : [ 
      { 
       "length" : 6, 
       "offset" : 0 
      } 
     ], 
     "place_id" : "ChIJr7uwwy58hYARBY-e7-QVwqw", 
     "reference" : "CoQBdAAAALaaZJbo1a0ryDQbiKVkJegxsY5kH4qPgQDb-XvnrbWGGkoqM-DKibj3h_F8YreAfgCDTlnlvQcqs3AktZ8yBAevST_OZxscfcwf5pJMbGSNunB4-IWzIWE3MNF9_tJ81wqEws654dH9hlNQE1T10qkQugi7olR_tLgET-GXionrEhBvoodbNkIOb4lzgPB-hYyMGhQ8xLVgTBYkS_6XMljJ29A4QHTisg", 
     "terms" : [ 
      { 
       "offset" : 0, 
       "value" : "Amoeba Music" 
      }, 
      { 
       "offset" : 14, 
       "value" : "Telegraph Avenue" 
      }, 
      { 
       "offset" : 32, 
       "value" : "Berkeley" 
      }, 
      { 
       "offset" : 42, 
       "value" : "CA" 
      }, 
      { 
       "offset" : 46, 
       "value" : "United States" 
      } 
     ], 
     "types" : [ "establishment" ] 
     }, 
     { 
     "description" : "Amoeba Music, Sunset Boulevard, Los Angeles, CA, United States", 
     "id" : "8512d4f54c170be86f4295876acf795f71829757", 
     "matched_substrings" : [ 
      { 
       "length" : 6, 
       "offset" : 0 
      } 
     ], 
     "place_id" : "ChIJRdmfADq_woARYaVhnfQSUTI", 
     "reference" : "CoQBdgAAAG51abYHTji939qdTFumtZHStapSvlYPMzREeuS4gqNVgFf07KFq4L_ADOL1vgMaNz8ti23VSfDjqypUZ5FIE_H98_RDvyBmdaeDdJwYaFxjkkwM4KBRP5NEWbIl8QLn2uVFAtivl87-BXwg39OXFZviC6Abvjg8RDJCLAQW-ZmIEhDnu0gg0g1MPAzFzV5hziW6GhTQzd6VWU7GOXtafRZiGeJjz5bcaw", 
     "terms" : [ 
      { 
       "offset" : 0, 
       "value" : "Amoeba Music" 
      }, 
      { 
       "offset" : 14, 
       "value" : "Sunset Boulevard" 
      }, 
      { 
       "offset" : 32, 
       "value" : "Los Angeles" 
      }, 
      { 
       "offset" : 45, 
       "value" : "CA" 
      }, 
      { 
       "offset" : 49, 
       "value" : "United States" 
      } 
     ], 
     "types" : [ "establishment" ] 
     }, 
     { 
     "description" : "Amoeba, Bengaluru, Karnataka, India", 
     "id" : "57f91ab3d03d3ac72541da26bfe1cf75d9ec4d9e", 
     "matched_substrings" : [ 
      { 
       "length" : 6, 
       "offset" : 0 
      } 
     ], 
     "place_id" : "ChIJgVZhUr0VrjsRMfKxI5eYTvs", 
     "reference" : "CmRcAAAAvra2I-LIaQnSYKeFrZNSVM2cPuz7w-gDhRjX6S17LoIhK4zaCCVf433E1n9tfl1pnHFX-jU-WCfczdpPSWRO1MEM4mn9PFuanbaFmKEkqHKumMURxZ6WlUD3T3GCr7F9EhAXdcUnBkegKfXCjjIl0U6vGhRk-JrZzx7zDEXBPyM7CIjTdDUVVw", 
     "terms" : [ 
      { 
       "offset" : 0, 
       "value" : "Amoeba" 
      }, 
      { 
       "offset" : 8, 
       "value" : "Bengaluru" 
      }, 
      { 
       "offset" : 19, 
       "value" : "Karnataka" 
      }, 
      { 
       "offset" : 30, 
       "value" : "India" 
      } 
     ], 
     "types" : [ "establishment" ] 
     }, 
     { 
     "description" : "Amoeba Technology, Hope Street, Brooklyn, NY, United States", 
     "id" : "c0285506f5cfaac3aece62508e24a83250af78f9", 
     "matched_substrings" : [ 
      { 
       "length" : 6, 
       "offset" : 0 
      } 
     ], 
     "place_id" : "ChIJ8y-bsF9ZwokR8vLp5TdLuMM", 
     "reference" : "CoQBdAAAALCoN-FVJ7lQLMelrU5uo0OiT58puqj7IYEfyw8PMxboCxsoTB63prCoe8zlXYwegvbeO4t91LQVMzGAqmoKvXTbE7U87l97L9VCZ2yErCLgfh8kQCvxfphn137y9Expuk5dRVjz08M29jZEJTAjcNOswTp5jyvgbJ24cI_-z73hEhCe9YN54HsXQFjV3lDi7KoqGhQXx5lsWIvqvjguSc09cgquik_6wg", 
     "terms" : [ 
      { 
       "offset" : 0, 
       "value" : "Amoeba Technology" 
      }, 
      { 
       "offset" : 19, 
       "value" : "Hope Street" 
      }, 
      { 
       "offset" : 32, 
       "value" : "Brooklyn" 
      }, 
      { 
       "offset" : 42, 
       "value" : "NY" 
      }, 
      { 
       "offset" : 46, 
       "value" : "United States" 
      } 
     ], 
     "types" : [ "establishment" ] 
     } 
    ], 
    "status" : "OK" 
} 

回答

1

最后回答:

试试这个上renderRow:

 renderRow={this._renderRow.bind(this)} 

另一个更新

见弗兰克郑的回答,我认为,从长远来看,这是更为明智使用自动绑定。

+0

它不起作用,应用程序在视图呈现在此行之前崩溃。 –

+0

我运行了你原来的例子(填入几个空格以便我可以运行它),但我可以调用goToDetails没有问题。你可以显示你用来创建数据源的代码吗? – Stavash

+0

感谢您的回复,我更新了数据源创建部分的问题。在此先感谢:) –

1

另一种解决此问题的方法是使用React.createClass来创建组件。因为通过这种方式,反应将始终将this绑定到正确的上下文中。

AutoBinding

+0

感谢您的回答以及我不知道的这篇技巧:) –