0
试图通过读取JSON数据来执行自动完成建议。在JSON中访问数组内部的数组React-Native
JSON数据的格式是:
locations: [ { "Companyname": "pqr", "TopfiveproductsList": [ { "prodId": "16", "prodName": "abc" }, { "prodId": "17", "prodName": "xyz" } ], "companycode": "C1" }, { "Companyname": "zzz", "TopfiveproductsList": [ { "prodId": "12", "prodName": "yyy" }, { "prodId": "14", "prodName": "lmn" }, { "prodId": "32", "prodName": "qaq" } ], "companycode": "C2" } ]
显示从
locations
阵列和TopfiveproductsList
阵列的其相应的记录companyname
。
在下面的代码中显示companyname
,但不显示其相应的TopfiveproductsList.prodName
。访问
prodName
给出错误JSON parse error: Unexpected identifier object
。<Autocomplete autoCapitalize="none" autoCorrect={false} data={locations} defaultValue={query} onChangeText={text => this.setState({ query: text })} renderItem={({ Companyname, TopfiveproductsList.prodName }) => ( <Text>{Companyname} {TopfiveproductsList.prodName}</Text )} />
index.android.js
import Sample from './sample.json';
export default class pre extends Component {
constructor(props) {
super(props);
this.state = {
locations: [],
query: '',
};
}
loadData() {
this.setState({ locations : Sample });
}
findLocation(query) {
this.loadData();
const { locations } = this.state;
const regex = new RegExp(`${query.trim()}`, 'i');
return locations.filter(location => location.Companyname.search(regex) >= 0);
}
render() {
const { query } = this.state;
const locations = this.findLocation(query);
return (
<View>
<Autocomplete
autoCapitalize="none"
autoCorrect={false}
data={locations}
defaultValue={query}
onChangeText={text => this.setState({ query: text })}
renderItem={({ Companyname }) => (
<Text> {Companyname} </Text>)}
/>
</View>
);
}
}
提示错误'r.render():有效的做出反应元素(或空)必须归还。你可能已经返回undefined,一个数组或其他一些无效的对象。' – Akki
哦,我的坏,你必须改变它'返回 ... ',我只是更新了我的答案 –
谢谢。我也想添加ToucableOpacity。我试着做这个'返回 this.setState({query:Companyname})}> \t {公司名称} {prodNames} TouchableOpacity>}'但它给出了错误'rawtext必须是包裹在明确的组件' –
Akki