如何在React.js中映射嵌套数组?

时间:2016-06-29 21:07:30

标签: javascript arrays reactjs

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

我理想的结果当然是获取整个数组对象的长度。

将[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>
    )
 }

1 个答案:

答案 0 :(得分:0)

只需从土豆周围移除新的Array()就可以解决您的问题。

好像你可能已经创建了一个不必要的附加阵列。

然后你可以删除子组件中对象的[key]引用,你应该好好去!

这会解决您的问题吗?