React Native:如何从具有嵌套 json 数组的状态检索数据并映射该状态以获取具有给定 ID 的特定值
React Native : How to retrieve data from a State with a nested json array and Map that state to get a particular value with a given id
我有一个 React Native 选择器,它有一个对象数组,我从我的 API 中获取这些对象并保存到属性下的状态。
This is a screenshot of my data fetched
当我 select 属性 下拉列表时,我需要从 _id 在数组中找到正确的对象。我需要使用 Javascript 逻辑来完成此操作,而无需再次调用我的服务器。
这是我在下拉渲染中的代码
<View style={{margin: 20, flexDirection: 'row', flex: 1}}>
{/*PROPERTY....................................................*/}
<View style={{padding: '10px'}}>
<Picker style={styles.picker} selectedValue={this.state.pickerProperty}
onValueChange={(itemValue, itemIndex) => this.getPropertyById(itemValue)}>
<Picker.Item label="Select Property" value=""/>
{this.state.properties.map((item, key) => (
<Picker.Item label={item.PropertyName} value={item._id} key={key}/>
))}
</Picker>
{/*{this.getPropertyById()}*/}
</View>
{/*TYPE........................................................*/}
<View style={{padding: 10}}>
<Picker style={styles.picker} selectedValue={this.state.pickerType}
onValueChange={(itemValue, itemIndex) => this.setState({pickerType: itemValue})}>
<Picker.Item label="Select Type" value=""/>
{this.state.propById.map((item, key) => (
<Picker.Item label={item.tname} value={item.tname} key={key}/>
))}
</Picker>
<Text>{this.state.pickerType}</Text>
</View>
</View>
我需要在这个函数中编写我的代码
getPropertyById=(itemValue)=> { //Need the code here
}
this.setState({
pickerProperty : this.state.properties.find(item => item._id === itemValue)
})
或作为函数
getPropertyById(itemValue) {
this.setState({
pickerProperty : this.state.properties.find(item => item._id ===
itemValue)
})
}
试试这个
const getPropertyById = (propertiesArray, itemValue) => {
return propertiesArray.find(item => item._id === itemValue)
}
在您的 onValueChange
中这样称呼它:
this.getPropertyById(this.state.properties, itemValue)
找到了这个解决方案,它对我有帮助。
changeProperty(event) {
this.setState({selectedProperty: event.target.value});
this.setState({types: this.state.properties.find(property => property.PropertyName === event.target.value).Type})
}
changeType(event) {
this.setState({selectedType: event.target.value});
const Ty = this.state.properties.find(property => property.PropertyName === this.state.selectedProperty).Type;
this.setState({items: Ty.find(Typ => Typ.typename === event.target.value).Item})
}
在每个下拉菜单的 onChange={} 中使用其中的每一个都可以解决问题。
不要忘记按如下方式修改您的构造函数
constructor(props) {
super(props);
this.changeProperty = this.changeProperty.bind(this);
this.changeType = this.changeType.bind(this);
}
我有一个 React Native 选择器,它有一个对象数组,我从我的 API 中获取这些对象并保存到属性下的状态。 This is a screenshot of my data fetched
当我 select 属性 下拉列表时,我需要从 _id 在数组中找到正确的对象。我需要使用 Javascript 逻辑来完成此操作,而无需再次调用我的服务器。 这是我在下拉渲染中的代码
<View style={{margin: 20, flexDirection: 'row', flex: 1}}>
{/*PROPERTY....................................................*/}
<View style={{padding: '10px'}}>
<Picker style={styles.picker} selectedValue={this.state.pickerProperty}
onValueChange={(itemValue, itemIndex) => this.getPropertyById(itemValue)}>
<Picker.Item label="Select Property" value=""/>
{this.state.properties.map((item, key) => (
<Picker.Item label={item.PropertyName} value={item._id} key={key}/>
))}
</Picker>
{/*{this.getPropertyById()}*/}
</View>
{/*TYPE........................................................*/}
<View style={{padding: 10}}>
<Picker style={styles.picker} selectedValue={this.state.pickerType}
onValueChange={(itemValue, itemIndex) => this.setState({pickerType: itemValue})}>
<Picker.Item label="Select Type" value=""/>
{this.state.propById.map((item, key) => (
<Picker.Item label={item.tname} value={item.tname} key={key}/>
))}
</Picker>
<Text>{this.state.pickerType}</Text>
</View>
</View>
我需要在这个函数中编写我的代码
getPropertyById=(itemValue)=> { //Need the code here
}
this.setState({
pickerProperty : this.state.properties.find(item => item._id === itemValue)
})
或作为函数
getPropertyById(itemValue) {
this.setState({
pickerProperty : this.state.properties.find(item => item._id ===
itemValue)
})
}
试试这个
const getPropertyById = (propertiesArray, itemValue) => {
return propertiesArray.find(item => item._id === itemValue)
}
在您的 onValueChange
中这样称呼它:
this.getPropertyById(this.state.properties, itemValue)
找到了这个解决方案,它对我有帮助。
changeProperty(event) {
this.setState({selectedProperty: event.target.value});
this.setState({types: this.state.properties.find(property => property.PropertyName === event.target.value).Type})
}
changeType(event) {
this.setState({selectedType: event.target.value});
const Ty = this.state.properties.find(property => property.PropertyName === this.state.selectedProperty).Type;
this.setState({items: Ty.find(Typ => Typ.typename === event.target.value).Item})
}
在每个下拉菜单的 onChange={} 中使用其中的每一个都可以解决问题。 不要忘记按如下方式修改您的构造函数
constructor(props) {
super(props);
this.changeProperty = this.changeProperty.bind(this);
this.changeType = this.changeType.bind(this);
}