Question

我正在尝试按照官方教程开发我的第一个反应原生应用程序。我已经制作了一个包含自定义列表视图的视图，这是代码

_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中的一行给我这个错误时，应用程序崩溃了

无法读取null
的属性'goToDetails'

这是错误屏幕

编辑1：

我的数据源是googleAPI autoComplete的结果，现在我只显示说明

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"
}

Answer 1

更新回答：

在renderRow上试试这个：

.close()

另一次更新

请参阅Frank Cheng的回答，我认为从长远来看，使用自动绑定会更明智。

Answer 2

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

AutoBinding

行点击时应用程序崩溃 - 反应原生

2 个答案: