React中使用map遍历模拟JSON数据渲染多条Feed时报错无内容

• 未正确导入并使用FeedInfo.json数据：当前仅引入了json文件路径未赋值给变量，且state中没有初始化feedList字段，也没有将json数据存入state，导致this.state.feedList始终为undefined，配合|| []使用时等价于遍历空数组，自然没有内容渲染。
• 遍历语法错误：map返回的article本身就是当前遍历到的单条feed对象，不需要再加索引[i]取值，article[i]会得到undefined。
• 存在多处拼写错误：比如将json中的describtion字段错写为descirbtion，还出现了不存在的变量this.articleicle。
• 图片路径不匹配：json中存储的selfiImg、feedImg是字符串标识，和代码中import进来的图片变量没有对应关系，直接使用字符串作为图片路径无法正常加载资源。
• 未将key设置为React元素属性：当前将key值直接写为div的文本内容，没有给遍历生成的根元素绑定key属性。

1. 修正FeedInfo.json的导入语句，给json数据赋值变量：

// 替换原有的导入行
import FeedInfo from '../../../../../jiwanjeon/FeedInfo.json';

2. 在state中初始化feedList字段，直接赋值导入的json数据：

constructor() {
  super();
  this.state = {
    value: '',
    commentList: [],
    feedList: FeedInfo // 新增这行
  };
}

3. 建立图片字符串标识和导入变量的映射关系，放在render方法return之前即可：

render() {
  const imgMap = {
    "selfi-img": selfiImg,
    "ucscPic": ucscPic
  }
  return (
    // 原有代码
  )
}

4. 修正map遍历内的所有取值逻辑、拼写错误、key属性：

• 保持遍历行写法{(this.state.feedList || []).map((article, i) => {即可
• 把根div改为：<div className="article" key={article.key || i}>，删除多余的key = {i}文本
• 把所有article[i]改为article，比如头像路径改为src={imgMap[article.selfiImg]}，feed图片路径改为src={imgMap[article.feedImg]}，用户名改为{article.id}
• 把描述字段改为{article.describtion}，删除不存在的this.articleicle前缀

修改完成后即可正常渲染多条Feed。

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