React中遍历JSON对象仅获取到键无法取值的问题排查

• 遍历对象错误：你当前遍历的是外层parsed_link数组的键，拿到的自然是数组索引0、1、2，实际要遍历的是parsed_link[0].Header这个存储图片信息的数组。
• 渲染逻辑错误：你在map回调中定义了img标签后直接返回null，所有img元素都不会被渲染到页面上。
• 取值逻辑错误：你没有从每个数组元素中取出image字段的实际值，直接把索引作为图片src赋值，自然无法正确加载图片。
• 多余操作冗余：你对已经是JSON对象的image做了JSON.stringify再JSON.parse的操作，属于完全不必要的冗余逻辑，可以直接删掉。

首先简化数据处理逻辑：

// 原冗余代码可以直接替换为直接取Header数组
const imageList = image[0].Header;

然后替换渲染部分的代码：

<div>
  {
    imageList.map((item, index) => {
      // 循环中需要给元素加唯一key属性，是React列表渲染的要求
      return <img 
        key={index} 
        src={item.image} 
        alt="something" 
        width="300" 
        height="200" 
      />;
    })
  }
</div>

内容的提问来源于stack exchange，提问作者Ankzious