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

How to map a nested array in React.js?

本文关键字：映射 嵌套 数组 js React      更新时间：2023-09-26

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

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

添加[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>
    )
 }

只需从马铃薯常量周围删除new Array()即可解决您的问题。

您可能创建了一个不必要的额外数组。

然后你可以在子组件中删除对象上的那些[key]引用，然后你就可以开始了!

这是否解决了您的问题?

相关文章：