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

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

• 显示来自locations数组的companyname及其对应的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   }}
    />