首先，我想说我是React-native的初学者，我遇到的情况是我得到包含一些汽车的列表，我正在使用Picker列出所有这些汽车。当我选择一辆车时，需要在下面的字段中显示这辆车的公里数，该怎么办？
在我的代码中，我可以获得汽车列表并进行选择：
<Content>
<Form>
<Picker
placeholder='Select the car'
placeholderStyle={{ color: '#000' }}
selectedValue={this.state.descViatura}
onValueChange={this.onValueChange.bind(this)}
>
{
list_viaturas.map((item, key) => {
return <Picker.Item
label={[item.marca, ' ', item.modelo, ' ', item.matricula]}
value={item.id}
key={item}
/>
})
}
</Picker>
</Form>
</Content>
我的componentDidMount（）：
componentDidMount() {
axios.get(`${API_MOTORISTAS_VIATURAS}`, {
'param1': this.state.api_token
}, {
"headers": {
'Content-Type': 'application/json',
}
}).then((dataSource) => {
this.setState({
viaturas: true,
dataSource: dataSource.data['data'],
})
})
.catch(error => console.log(error));
}
我的onValueChange（）：
onValueChange(value: string) {
this.setState({
descViatura: value,
});
}
我需要显示公里数的字段：
<TextInput
style={styles.input}
value={this.state.km_actuais}
keyboardType={'numeric'}
placeholderTextColor={'rgba(0, 0, 0, 0.6)'}
underlineColorAndroid='transparent'
/>
我从API中获得的JSON：
{
"data": [
{
"id": 3,
"matricula": "55-RR-80",
"modelo": "C3",
"foto": "230530201805185aff5c3af0ac0.jpeg",
"lotacao": 4,
"km_actuais": "85555",
"marca_id": 203,
"grupo_id": 5,
"orga_id": 3,
"data_matricula": "2018-05-18 22:00:00",
"transfer_zona": 1,
"transfer_km": 2,
"tours": 0,
"shuttle": 0,
"chauffer": 0,
"created_at": "2018-05-18 21:01:51",
"updated_at": "2019-02-02 16:16:25",
"marca": "Citroen"
},
{
"id": 5,
"matricula": "95-ER-75",
"modelo": "Vito",
"foto": "230620201805185aff5c6cb8f12.png",
"lotacao": 8,
"km_actuais": "36500",
"marca_id": 237,
"grupo_id": 7,
"orga_id": 3,
"data_matricula": "2018-05-18 23:06:20",
"transfer_zona": 1,
"transfer_km": 2,
"tours": 0,
"shuttle": 0,
"chauffer": 0,
"created_at": "2018-05-18 21:03:53",
"updated_at": "2018-07-19 01:35:37",
"marca": "Mercedes"
},
{
"id": 6,
"matricula": "30-KJ-98",
"modelo": "Starbus",
"foto": "230609201805185aff5c611d183.png",
"lotacao": 16,
"km_actuais": "65900",
"marca_id": 237,
"grupo_id": 8,
"orga_id": 3,
"data_matricula": "2018-05-24 21:35:35",
"transfer_zona": 1,
"transfer_km": 2,
"tours": 0,
"shuttle": 0,
"chauffer": 0,
"created_at": "2018-05-18 21:05:10",
"updated_at": "2018-06-26 20:55:25",
"marca": "Mercedes"
},
{
"id": 261,
"matricula": "61-13-FR",
"modelo": "Defender",
"foto": "grey.jpg",
"lotacao": 8,
"km_actuais": "500",
"marca_id": 3124,
"grupo_id": 136,
"orga_id": 3,
"data_matricula": "1995-09-11 00:00:00",
"transfer_zona": 1,
"transfer_km": 2,
"tours": 0,
"shuttle": 0,
"chauffer": 0,
"created_at": "2019-01-08 09:59:21",
"updated_at": "2019-02-08 11:01:28",
"marca": "Land Rover Defender"
},
{
"id": 4,
"matricula": "80-HH-65",
"modelo": "S",
"foto": "230546201805185aff5c4a8b517.png",
"lotacao": 4,
"km_actuais": "25001",
"marca_id": 237,
"grupo_id": 6,
"orga_id": 3,
"data_matricula": "2018-05-18 23:05:46",
"transfer_zona": 1,
"transfer_km": 2,
"tours": 0,
"shuttle": 0,
"chauffer": 0,
"created_at": "2018-05-18 21:02:58",
"updated_at": "2019-01-23 14:32:05",
"marca": "Mercedes"
},
{
"id": 269,
"matricula": "27-30-GV",
"modelo": "Defender",
"foto": "grey.jpg",
"lotacao": 8,
"km_actuais": null,
"marca_id": 3124,
"grupo_id": 136,
"orga_id": 3,
"data_matricula": "2019-01-16 00:00:00",
"transfer_zona": 1,
"transfer_km": 2,
"tours": 0,
"shuttle": 0,
"chauffer": 0,
"created_at": "2019-01-16 10:02:39",
"updated_at": "2019-01-16 10:02:39",
"marca": "Land Rover Defender"
},
{
"id": 270,
"matricula": "QF-22-82",
"modelo": "Defender",
"foto": "grey.jpg",
"lotacao": 8,
"km_actuais": null,
"marca_id": 3124,
"grupo_id": 136,
"orga_id": 3,
"data_matricula": "2019-01-16 00:00:00",
"transfer_zona": 1,
"transfer_km": 2,
"tours": 0,
"shuttle": 0,
"chauffer": 0,
"created_at": "2019-01-16 10:03:30",
"updated_at": "2019-01-16 10:03:30",
"marca": "Land Rover Defender"
},
{
"id": 271,
"matricula": "12-50-AI",
"modelo": "DEFENDER",
"foto": "grey.jpg",
"lotacao": 8,
"km_actuais": null,
"marca_id": 3124,
"grupo_id": 136,
"orga_id": 3,
"data_matricula": "2019-01-16 00:00:00",
"transfer_zona": 1,
"transfer_km": 2,
"tours": 0,
"shuttle": 0,
"chauffer": 0,
"created_at": "2019-01-16 10:04:03",
"updated_at": "2019-01-16 10:04:03",
"marca": "Land Rover Defender"
},
{
"id": 272,
"matricula": "96-73-AH",
"modelo": "DEFENDER",
"foto": "grey.jpg",
"lotacao": 8,
"km_actuais": null,
"marca_id": 3124,
"grupo_id": 136,
"orga_id": 3,
"data_matricula": "2019-01-16 00:00:00",
"transfer_zona": 1,
"transfer_km": 2,
"tours": 0,
"shuttle": 0,
"chauffer": 0,
"created_at": "2019-01-16 10:04:40",
"updated_at": "2019-01-16 10:04:40",
"marca": "Land Rover Defender"
},
{
"id": 273,
"matricula": "06-29-HU",
"modelo": "DEFENDER",
"foto": "grey.jpg",
"lotacao": 8,
"km_actuais": null,
"marca_id": 3124,
"grupo_id": 136,
"orga_id": 3,
"data_matricula": "2019-01-16 00:00:00",
"transfer_zona": 1,
"transfer_km": 2,
"tours": 0,
"shuttle": 0,
"chauffer": 0,
"created_at": "2019-01-16 10:05:13",
"updated_at": "2019-01-16 10:05:13",
"marca": "Land Rover Defender"
},
{
"id": 274,
"matricula": "45-DC-07",
"modelo": "TRANSIT",
"foto": "grey.jpg",
"lotacao": 8,
"km_actuais": null,
"marca_id": 216,
"grupo_id": 8,
"orga_id": 3,
"data_matricula": "2019-01-16 00:00:00",
"transfer_zona": 1,
"transfer_km": 2,
"tours": 0,
"shuttle": 0,
"chauffer": 0,
"created_at": "2019-01-16 10:06:06",
"updated_at": "2019-01-16 10:06:06",
"marca": "Ford"
},
{
"id": 275,
"matricula": "85-OR-89",
"modelo": "TRANSIT CUSTOM",
"foto": "grey.jpg",
"lotacao": 8,
"km_actuais": null,
"marca_id": 216,
"grupo_id": 8,
"orga_id": 3,
"data_matricula": "2019-01-16 00:00:00",
"transfer_zona": 1,
"transfer_km": 2,
"tours": 0,
"shuttle": 0,
"chauffer": 0,
"created_at": "2019-01-16 10:06:47",
"updated_at": "2019-01-16 10:06:47",
"marca": "Ford"
},
{
"id": 276,
"matricula": "79-38-QR",
"modelo": "DEFENDER",
"foto": "grey.jpg",
"lotacao": 8,
"km_actuais": null,
"marca_id": 227,
"grupo_id": 136,
"orga_id": 3,
"data_matricula": "2019-01-16 00:00:00",
"transfer_zona": 1,
"transfer_km": 2,
"tours": 0,
"shuttle": 0,
"chauffer": 0,
"created_at": "2019-01-16 10:07:24",
"updated_at": "2019-01-16 10:07:24",
"marca": "Land Rover"
},
{
"id": 277,
"matricula": "89-SI-78",
"modelo": "POLARIS RZR",
"foto": "grey.jpg",
"lotacao": 2,
"km_actuais": null,
"marca_id": 205,
"grupo_id": 5,
"orga_id": 3,
"data_matricula": "2019-01-16 00:00:00",
"transfer_zona": 1,
"transfer_km": 2,
"tours": 0,
"shuttle": 0,
"chauffer": 0,
"created_at": "2019-01-16 12:12:54",
"updated_at": "2019-01-16 12:12:54",
"marca": "DAF"
}
],
"error": "200"
}
答案 0 :(得分：0)
您应该使用项目的索引作为Picker项目中的值，并使用onValueChange方法，然后将km_actuais状态变量设置为基于原始数据中的索引的值，如下所示：
...
list_viaturas.map((item, key) => {
return <Picker.Item
label={[item.marca, ' ', item.modelo, ' ', item.matricula]}
value={key}
key={key}
/>
})
...
onValueChange(value: string) {
let kms = this.state.dataSource[value].km_actuais;
this.setState({
descViatura: value,
km_actuais: kms
});
}