Arrays 迭代原生基中的嵌套数组，并使用列表在多行上显示内容

我对本地人和本地人的反应很不熟悉。 我想使用React Native中的List访问下面JSON响应中数据数组中的“description”，并将它们显示为不同的列表项。

JSON文件（data.js）：

[
    {
        object: 'list',
        data: 
        [
        {
            id: 'cust1',
            object: 'customer',
            account_balance: 0,
            created: 1514549772,
            currency: 'usd',
            description: 'CustomerName1',
            discount: null,
            email: null,
            subscriptions: {
                object: 'list',
                data: [],
                has_more: false,
                total_count: 0,
                url: '/v1/customers/cust1/subscriptions'
            }
        },
        {
            id: 'cust2',
            object: 'customer',
            account_balance: 0,
            created: 1514549772,
            currency: 'usd',
            description: 'CustomerName2',
            discount: null,
            email: null,
            subscriptions: {
                object: 'list',
                data: [],
                has_more: false,
                total_count: 0,
                url: '/v1/customers/cust2/subscriptions'
            }
        },
        ],
        has_more: false,
        url: "/v1/customers"
    }
]

export default class CustomersScreen extends Component {
  render() {
    console.log(customers);
    return (
      <Container style={styles.container}>
        <Content>
          <List
            dataArray={customers}
            renderRow={({ object, data }) => {
              const customerName = data.map(item => item.description);  
              return (
              <ListItem>
                <Text>{customerName}</Text>
              </ListItem>)}}
          />
        </Content>
      </Container>
    );
  }
}

<Content>
    {
        customers.map((rowData, i) => {
        return(
            <List
                dataArray={rowData.data}
                key={i}
                renderRow={(item, k) => {
                const customerName = item.description; 
                return (
                <ListItem key={item.id}>
                    <Text>{customerName}</Text>
                </ListItem>)}}
            />)
        })
    }
</Content>

我的代码：

[
    {
        object: 'list',
        data: 
        [
        {
            id: 'cust1',
            object: 'customer',
            account_balance: 0,
            created: 1514549772,
            currency: 'usd',
            description: 'CustomerName1',
            discount: null,
            email: null,
            subscriptions: {
                object: 'list',
                data: [],
                has_more: false,
                total_count: 0,
                url: '/v1/customers/cust1/subscriptions'
            }
        },
        {
            id: 'cust2',
            object: 'customer',
            account_balance: 0,
            created: 1514549772,
            currency: 'usd',
            description: 'CustomerName2',
            discount: null,
            email: null,
            subscriptions: {
                object: 'list',
                data: [],
                has_more: false,
                total_count: 0,
                url: '/v1/customers/cust2/subscriptions'
            }
        },
        ],
        has_more: false,
        url: "/v1/customers"
    }
]

export default class CustomersScreen extends Component {
  render() {
    console.log(customers);
    return (
      <Container style={styles.container}>
        <Content>
          <List
            dataArray={customers}
            renderRow={({ object, data }) => {
              const customerName = data.map(item => item.description);  
              return (
              <ListItem>
                <Text>{customerName}</Text>
              </ListItem>)}}
          />
        </Content>
      </Container>
    );
  }
}

<Content>
    {
        customers.map((rowData, i) => {
        return(
            <List
                dataArray={rowData.data}
                key={i}
                renderRow={(item, k) => {
                const customerName = item.description; 
                return (
                <ListItem key={item.id}>
                    <Text>{customerName}</Text>
                </ListItem>)}}
            />)
        })
    }
</Content>

导出默认类CustomerScreen扩展组件{
render（）{
console.log（客户）；
返回(
{
const customerName=data.map（item=>item.description）；
返回(
{客户名称}
)}}
/>
);
}
}

在这篇文章的帮助下，我能够访问数据数组中的“描述”

但是，数据显示为：

[
    {
        object: 'list',
        data: 
        [
        {
            id: 'cust1',
            object: 'customer',
            account_balance: 0,
            created: 1514549772,
            currency: 'usd',
            description: 'CustomerName1',
            discount: null,
            email: null,
            subscriptions: {
                object: 'list',
                data: [],
                has_more: false,
                total_count: 0,
                url: '/v1/customers/cust1/subscriptions'
            }
        },
        {
            id: 'cust2',
            object: 'customer',
            account_balance: 0,
            created: 1514549772,
            currency: 'usd',
            description: 'CustomerName2',
            discount: null,
            email: null,
            subscriptions: {
                object: 'list',
                data: [],
                has_more: false,
                total_count: 0,
                url: '/v1/customers/cust2/subscriptions'
            }
        },
        ],
        has_more: false,
        url: "/v1/customers"
    }
]

export default class CustomersScreen extends Component {
  render() {
    console.log(customers);
    return (
      <Container style={styles.container}>
        <Content>
          <List
            dataArray={customers}
            renderRow={({ object, data }) => {
              const customerName = data.map(item => item.description);  
              return (
              <ListItem>
                <Text>{customerName}</Text>
              </ListItem>)}}
          />
        </Content>
      </Container>
    );
  }
}

<Content>
    {
        customers.map((rowData, i) => {
        return(
            <List
                dataArray={rowData.data}
                key={i}
                renderRow={(item, k) => {
                const customerName = item.description; 
                return (
                <ListItem key={item.id}>
                    <Text>{customerName}</Text>
                </ListItem>)}}
            />)
        })
    }
</Content>

客户名称1客户名称2->同一行

而不是（不同的行如下）

客户名称1

客户名称2

---

以下是我如何解决在多行嵌套数组中显示“描述”的问题：

[
    {
        object: 'list',
        data: 
        [
        {
            id: 'cust1',
            object: 'customer',
            account_balance: 0,
            created: 1514549772,
            currency: 'usd',
            description: 'CustomerName1',
            discount: null,
            email: null,
            subscriptions: {
                object: 'list',
                data: [],
                has_more: false,
                total_count: 0,
                url: '/v1/customers/cust1/subscriptions'
            }
        },
        {
            id: 'cust2',
            object: 'customer',
            account_balance: 0,
            created: 1514549772,
            currency: 'usd',
            description: 'CustomerName2',
            discount: null,
            email: null,
            subscriptions: {
                object: 'list',
                data: [],
                has_more: false,
                total_count: 0,
                url: '/v1/customers/cust2/subscriptions'
            }
        },
        ],
        has_more: false,
        url: "/v1/customers"
    }
]

export default class CustomersScreen extends Component {
  render() {
    console.log(customers);
    return (
      <Container style={styles.container}>
        <Content>
          <List
            dataArray={customers}
            renderRow={({ object, data }) => {
              const customerName = data.map(item => item.description);  
              return (
              <ListItem>
                <Text>{customerName}</Text>
              </ListItem>)}}
          />
        </Content>
      </Container>
    );
  }
}

<Content>
    {
        customers.map((rowData, i) => {
        return(
            <List
                dataArray={rowData.data}
                key={i}
                renderRow={(item, k) => {
                const customerName = item.description; 
                return (
                <ListItem key={item.id}>
                    <Text>{customerName}</Text>
                </ListItem>)}}
            />)
        })
    }
</Content>

{
customers.map（（rowData，i）=>{
返回(
{
const customerName=项目描述；
返回(
{客户名称}
)}}
/>)
})
}

我已成功使用列表在多行嵌套数组中显示客户名称（即说明）。更新的代码修复在上述问题描述中。如果有更好的解决方案，我会很高兴