如何在 React.js 中映射嵌套数组？答案

【问题标题】：How to map a nested array in React.js?如何在 React.js 中映射嵌套数组？
【发布时间】：2016-06-29 21:07:30
【问题描述】：

问题：我只能渲染我的数组的一次迭代。

我想要的结果当然是得到数组对象的全长。

向我的渲染对象字段添加 [key] 是唯一可以给我任何输出的方法。如果不以这种方式声明密钥，我什么也得不到

子组件

...
const Potatoes = ({potatoes}) => {
  const PotatoItems = potatoes.map((potato, key) => {
    if ([potato] == ''){
      return false
    } else {
    return (
      <li key={key}>
        <span>{potato[key].name}</span>
        <span>{potato[key].flavor}</span>
      </li>);
    }
  });
  return (
    <div>
      <ul>
        {PotatoItems}
      </ul>
    </div>
  );
};

父组件

 ...
 render () {
    const potatoes = new Array(this.props.potatoes);

    return (
      <section style={divStyle}>
         <Potatoes potatoes={potatoes} />
      </section>
    )
 }

【问题讨论】：

标签： javascript arrays reactjs

【解决方案1】：

只需从土豆常量中删除 new Array() 即可解决您的问题。

您似乎创建了一个不必要的附加数组。

然后您可以在子组件中删除对象上的那些 [key] 引用，您应该一切顺利！

这能解决您的问题吗？

【讨论】：