如何在 React 中遍历包含数组的对象并且该对象处于状态答案

【问题标题】：How can I iterate through an object containing arrays in React and the object is in the state如何在 React 中遍历包含数组的对象并且该对象处于状态
【发布时间】：2021-02-16 04:02:31
【问题描述】：

您好，我有一个组件，它的状态包含一个对象，并且该对象包含 6 个数组：

this.state = {
obiect: {
cif: [],
data_creare: [],
detalii: [],
id: [],
id_solicitare: [],
tip: []
}

在我通过 api 调用使用 setState 向数组添加值后，我想在 HTML 表中显示数组。

如何遍历对象的数组，以便将它们显示在表格行上？

我尝试了 this.state.obiect.map(...etc，但它给了我一个错误。

谢谢

【问题讨论】：

您能告诉我们您尝试访问 this.state 的代码吗？
obiect 仍然是一个对象，你需要this.state.obiect.cif.map(...)

标签： javascript html arrays reactjs object

【解决方案1】：

我认为您可以使用this.state.object.slice() 获取对象中的不同对象。对于这些对象，您需要 .map this.state.object.id.map()

【讨论】：

【解决方案2】：

这是使用Object.entries()的基本迭代

const state = {
  obiect: {
    cif: [1,2],
    data_creare: [3,4],
    detalii: [5,6],
    id: [7,8],
    id_solicitare: [9, 10],
    tip: [11,12]
  }
};

Object.entries(state.obiect).forEach(([k,v]) => {
  console.log(k, v);
  v.forEach(ele => console.log(ele));
});

如果您想水平访问数组，您可以找到最长的数组并使用for 循环。

const state = {
  obiect: {
    cif: [1,2],
    data_creare: [3,4],
    detalii: [5,6],
    id: [7,8],
    id_solicitare: [9, 10, 13],
    tip: [11,12]
  }
};

const maxL = Object.values(state.obiect).reduce((a, b) => (a = a > b.length ? a : b.length, a), 0);

for (let i=0; i<maxL; i++) {
  let row = ''
  Object.entries(state.obiect).forEach(([k,v]) => {
    const value = v[i] ?? '-';
    row += `${k}: ${value} `;
  });
  console.log(row);
}

【讨论】：

【解决方案3】：

要遍历对象的属性，您可以使用for...in loop：

let state = {
  obiect: {
    cif: [],
    data_creare: [],
    detalii: [],
    id: [],
    id_solicitare: [],
   tip: []
  }
}

for(let i in state.obiect){
  console.log(`${i} : ${state.obiect[i]}`)
}

【讨论】：

【解决方案4】：

试试这个

for (const [key, value] of Object.entries(this.state.obiect)) {
  // object1[`${key}`].map(...) here for dynamic array
}

【讨论】：