使用 React 渲染嵌套数据

Question

我有一个这样的数组：

let obj = [
    ['Banana', 'Apple'],
    ['Orange', 'Chicken'],
    ['Data', 'Beer']
];

我无法渲染列表中的每个项目。

我尝试了什么：

<List>
    {this.state.list.map((item, key)=>(
        {item.map((i, k) => (
            <ListItem primaryText={i}/>
        ))}
    ))}
</List>

有没有办法像我一样使用 React 迭代嵌套数据？

我在{item.map((i, k) => ( 这一行出现错误，编译器说它正在等待: 而不是.

使用 AngularJS，我可以很容易地做到这一点：

<li ng-repeat="item in items">
    <li ng-repeat="i in item">{{i}}</li>
</li>

所以如果有类似的东西，那就太好了！

Answer 1

使用Array#concat 和spread 展平列表，然后使用单个Array#map 进行迭代：

const arr = [
    ['Banana', 'Apple'],
    ['Orange', 'Chicken'],
    ['Data', 'Beer']
];

const List = ({ list }) => (
  <ul>
    {[].concat(...list).map((item, key)=>(
        <li key={key}>{item}</li>
    ))}
  </ul>
);

ReactDOM.render(
  <List list={arr} />,
  demo
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>

Answer 2

每个嵌套列表都需要存在于一个元素中。以下是 Angular 代码的字面翻译：

<ul>
  {items.map(item => (
    <li>
      {item.map(i => (
        <li>{i}</li>
      ))}
    <li>
  ))}
</ul>

虽然这没有多大意义，因为ul > li > li 是无效嵌套。您可能希望将 item.map 调用包装在另一个 <ul> 元素中。

React 元素（通常）期望作为子元素传递一个由其他 React 元素组成的数组，但是您原来的嵌套映射返回的是数组。