Question

尝试通过读取JSON数据来执行自动完成建议。

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

从companyname数组中显示locations及其TopfiveproductsList数组的相应记录。
在下面的代码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>
        );
      }
    }

Answer 1

TopfiveproductsList是一个对象数组，你不能只使用TopfiveproductsList.prodName来获得你需要的东西。看起来你需要使用一个字符串数组，所以你必须自己构建它：

<Autocomplete
    autoCapitalize="none"
    autoCorrect={false} 
    data={locations}
    defaultValue={query}
    onChangeText={text => this.setState({ query: text })}
    renderItem={({ Companyname, TopfiveproductsList }) => {
        const prodNames = TopfiveproductsList.map(item => item.prodNames);
        return <Text>{Companyname} {prodNames}</Text   }}
    />

在JSON React-Native中访问数组内部的数组

1 个答案: