在反应中迭代json数组时遇到问题答案

【问题标题】：Having trouble iterating through a json array in react在反应中迭代json数组时遇到问题
【发布时间】：2019-11-05 20:32:24
【问题描述】：

我似乎无法从 json 数组中的较低级别提取数据。我可以提取顶级数据，但是尝试进一步提取任何内容时会出错。我才刚刚开始学习 API 和 React，因此我们将不胜感激。

[
  {
    containerId: 1,
    containerName: "Finance",
    containerDescription: null,
    vitems: [
            {
                itemId: 2,
                itemName: "Sun",
                itemDescription: null,
                itemType: "Maintain",
                itemTypeDescription: null,
                css: "darkgreen"
            },
            {
                itemId: 3,
                itemName: "Concur",
                itemDescription: null,
                itemType: "Maintain",
                itemTypeDescription: null,
                css: "darkgreen"
            },
            {
                itemId: 4,
                itemName: "Basware",
                itemDescription: null,
                itemType: "Maintain",
                itemTypeDescription: null,
                css: "darkgreen"
            }
        ]
    }
]

  componentDidMount() {
    const API_URL = 'http://localhost:5000/changeatdate/1/2019-07-01';

    fetch(API_URL)
      .then(results => {
        return results.json()
      })
      .then(data => {
        let items = data.map((i) => {
          return(
            <ul key={i.containerId} className='container'>
              <h1 key={i.containerId*0.1}>{i.containerName}</h1>
              <li key={i.containerName}></li>
            </ul>
          )
        })
        this.setState({items});
      })
  }
  render() {{this.state.items}}

上述方法有效（是的 - 我知道我需要对我的钥匙进行排序......）。但是我怎样才能让 vitems 出现在容器中呢？

我真的被困住了，我相信这很简单，所以希望有人能帮助我。

我确实注意到的一件事是我的 json 以 [ 开头，而不是直接转到 {。我正在使用 sequelize、模型和“包含”的使用。

提前谢谢你！

【问题讨论】：

标签： arrays json reactjs api dictionary

【解决方案1】：

您可以使用多个 for 循环来使用这种简单的技术

for 循环主数组长度
用于 vitems 长度的循环

我添加了一个sn-p

var x =  [{
 		containerId: 1,
 		containerName: "Finance",
 		containerDescription: null,
 		vitems: [{
 				itemId: 2,
 				itemName: "Sun",
 				itemDescription: null,
 				itemType: "Maintain",
 				itemTypeDescription: null,
 				css: "darkgreen"
 			},
 			{
 				itemId: 3,
 				itemName: "Concur",
 				itemDescription: null,
 				itemType: "Maintain",
 				itemTypeDescription: null,
 				css: "darkgreen"
 			},
 			{
 				itemId: 4,
 				itemName: "Basware",
 				itemDescription: null,
 				itemType: "Maintain",
 				itemTypeDescription: null,
 				css: "darkgreen"
 			}
 		]
 	},
 	{
 		containerId: 2,
 		containerName: "Technology",
 		containerDescription: null,
 		vitems: [{
 				itemId: 2,
 				itemName: "Sun",
 				itemDescription: null,
 				itemType: "Maintain",
 				itemTypeDescription: null,
 				css: "darkgreen"
 			},
 			{
 				itemId: 3,
 				itemName: "Concur",
 				itemDescription: null,
 				itemType: "Maintain",
 				itemTypeDescription: null,
 				css: "darkgreen"
 			},
 			{
 				itemId: 4,
 				itemName: "Basware",
 				itemDescription: null,
 				itemType: "Maintain",
 				itemTypeDescription: null,
 				css: "darkgreen"
 			}
 		]
 	}
 ]

//Iterate over main array
for(let i=0; i< x.length; i++){
  const vitemsLength = x[i].vitems.length;
  //Iterate over vitems array based on it's length
  for(let j=0; j < vitemsLength; j++){
    console.log(x[i].vitems[j]);
  }
}

【讨论】：

【解决方案2】：

您可以通过下面提到的方式迭代 vitems：

<ul key={i.containerId} className='container'>
    <h1>{i.containerName}</h1>
    {
        i.vitems.map(el => <li key={el.itemId}>{el.itemName}</li>)
    }
</ul>

h1 标签上不需要密钥。

【讨论】：