Question

我具有以下对象定义：

var idObject = {
    item1: "",
    item2: "",
    item3: "",
    array1: [],
    array2: [],
    array3: []
}

array1，array2和array3中的项数始终相同，因此array1.length将等于array2.length将等于array3.length。对于此示例，假设数组1中有3个项目，数组2中有3个项目，数组3中有3个项目。

该对象将有多个实例，因此我使用以下代码将它们推入另一个数组中：

idArray.push(idObject);

在此示例中，假设我最终创建了2个idObject。

我正在尝试渲染结构。输出应如下所示：

item1       item2       item3
array1[1]   array2[1]   array3[1]
array1[2]   array2[2]   array3[2]
array1[3]   array2[3]   array3[3]

item1       item2       item3
array1[1]   array2[1]   array3[1]
array1[2]   array2[2]   array3[2]
array1[3]   array2[3]   array3[3]

我在呈现数据的逻辑方面遇到了问题。非常感谢您的协助。

Answer 1

让我们从数组开始，那很简单，我们只需获取每个元素并将其包装到div中即可。

  const List = ({ list }) => list.map(el => (<div>{el}</div>));

现在我们必须对列表和标题进行分组：

 const TitleList = ({ list, title }) => (<div>
  <h3>{title}</h3>
  <List list={list} />
 </div>);

现在，我们需要另一个组件来将您的对象中的一个变成三个标题列表：

 const Group = ({ item1, item2, item3, array1, array2, array3 }) => (<div className="row">
   <TitleList list={array1} title={item1} />
   <TitleList list={array2} title={item2} />
   <TitleList list={array3} title={item3} />
 </div>);

现在只需映射您的数组：

  const result = idArray.map(props => (<Group {...props} />));

，您将获得一个可以安装到DOM的元素数组：

 ReactDOM.render(result, document.body);

Answer 2

以下解决方案将为您提供想要的东西

  const outputArray = array1.map((item, index) => (
      <row key={item.id}>
          <col>{item}</col>
          <col>{array2[index]}</col>
          <col>{array3[index]}</col>
      </row>
  )

Answer 3

如何将项目和数组封装到它们自己的键中？像

let idObject = {
  'items' : ["1", "2", "3"],
  'arrays' : [ [1,2,3] , [4,5,6], [7,8,9] ]
};

遍历似乎更简单。以下代码段假定：项目数量与可用的数组数量相对应。

let idObjectA = {
  'items' : ["1", "2", "3"],
  'arrays' : [ [1,2,3] , [4,5,6], [7,8,9] ]
};

let idObjectB = {
  'items' : ["A", "B", "C"],
  'arrays' : [ [10, 11, 12] , [13,14,15], [16,17,18] ]
};

let idObjects = [idObjectA, idObjectB];

idObjects.forEach((idObject) => {
  let items = idObject.items;
  console.log("-----------------------------New idObject-----------------------------");
  for(let i=0; i<items.length;++i){
    console.log( "Item"+items[i]);
    console.log("Array"+i);
    let item_array = idObject.arrays[i];
    item_array.forEach((value) => {
      console.log(value);
    });
  }
  
});

reactJS应用呈现包含数组的对象数组

3 个答案: