javascript - 使用 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>