React中Map渲染API数据顺序异常 reverse方法未生效

• Array.reverse() 是原地修改方法，会直接改变调用它的数组本身，而非返回新的反转副本。你在JSX渲染逻辑中直接调用该方法，若之前处理接口数据时已经对原始state数组做过未拷贝的reverse操作，会导致原始数组顺序被篡改，后续渲染时再次调用reverse相当于二次反转，顺序回到初始倒序状态，表现为reverse不生效。
• React严格模式会重复执行渲染函数做副作用检测，直接在JSX中执行会修改数组的方法，会因重复执行出现顺序计算偏差。
• 你的列表key属性放置位置错误：你把key加在了列表项的内层div上，没有加在遍历返回的根元素上，React无法正确追踪列表项顺序，也会导致渲染顺序不符合预期。
• 两处同分类的渲染逻辑重复执行filter，存在冗余计算，也容易引发两边顺序不一致的问题。

1. 所有会修改原数组的操作（比如reverse、sort等），执行前先对数组做浅拷贝，避免污染原始数据源。
2. 把需要遍历的列表数据提前计算好，不要在JSX结构中写filter、reverse这类数据处理逻辑，减少重复计算，也避免渲染阶段的副作用。
3. 把key属性移动到遍历返回的最外层元素上，保证React能正确识别列表项。

修正后的代码示例 #

提前计算渲染数据（写在组件函数内部，JSX返回逻辑之前） #

// 过滤出技术分类的博客列表，浅拷贝后再反转，不会修改原始cat数组
const techBlogList = cat
  .filter(categ => categ.category === 'technology')
  .slice() // 无参数调用slice返回原数组的浅拷贝
  .reverse();

// 技术分类的产品列表，不需要反转就直接用过滤结果
const techProductList = cat.filter(categ => categ.category === 'technology');

修正列表项组件的key位置 #

const blogCategory = (item) => {
  return( 
    // key必须加在遍历返回的根元素上
    <div key={item.title}>
      <div className="mx-3" style={{display:"flex",justifyContent:"center",height:"750px"}}>
        <div className="blog bolg-post">
          <div className="img-hover-zoom">
            <Link href={`/blogs/${item.title.replace(urlR,"-").replace('?',"")}`}>
              <img style={{cursor:"pointer"}} className="blog-box" src={item.urlToImage}/>
            </Link> 
          </div>
          <div className="d-flex flex-column">
            <span className="name-blog">{item.category}</span>
            <Link href={`/blogs/${item.title.replace(urlR,"-").replace('?',"")}`}>
              <span style={{cursor: "pointer",textAlign:"justify",maxHeight:"62px",overflow:"hidden"}} className="heading-blog">{item.title}</span>
            </Link>
            <div style={{height:"100px",overflow:"hidden",textAlign:"justify"}} className="para-blog">{item.meta_description}</div>
            <Link href={`/blogs/${item.title.replace(urlR,"-").replace('?',"")}`}>
              <button className="btn-blog mt-3">{item.readingTime}&nbsp;min read</button>
            </Link>
          </div> 
        </div>
      </div>
    </div>
  )
}

修正JSX渲染逻辑 #

<div className='d-flex col-12' style={{width:"1000px"}}>
  <div style={{height:"650px",overflow:'hidden'}}>
    {techBlogList.map(blogCategory)}
  </div>
  <div className="products">
    {techProductList.map(productCategory)}
  </div> 
</div>

如果调整后顺序还是不符合预期，直接检查接口返回的原始cat数组顺序，去掉reverse或者保留reverse即可匹配你要的[0,1,2...9]顺序，因为浅拷贝后的reverse不会再污染原始数据，调整顺序时不会出现互相影响的问题。

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