我可以保证 React 组件数组的渲染顺序吗？

Posted 2023-02-22

【中文标题】我可以保证 React 组件数组的渲染顺序吗？

【英文标题】：Can I guarantee the render order of an array of React components?

【发布时间】：2015-11-26 01:37:04

【问题描述】：

我有一组反应组件，我试图以特定顺序呈现。像这样的：

render: function() 
  var items = stock.map(function(item) 
    return <NewLI data=item key=item.id/>
  
  return <ul>items</ul>

我的问题是 React 没有按原始数组的顺序返回 li（实际组件比单个 li 更复杂，但它被正确包装在 div 中）。

所以如果打印items 的id 键，我会得到：

items.forEach(function(a)  console.log(a.id) )
> 1
> 2
> 3
> 4

但我的 React 渲染看起来像这样：

<ul>
  <li...>2</li>
  <li...>3</li>
  <li...>4</li>
  <li...>1</li>
</ul>

这是预期的行为吗？有没有办法保证订单？

【问题讨论】：

我有这个字面问题，它有时会发生在 ReactJS 决定混淆顺序但我无法找到原因的模式并且数组顺序看起来没有变化。

【参考方案1】：

这不是预期的行为。 React 总是按照元素的顺序渲染数组。

如果存在具有冲突的 key 值的项目，则只会呈现最新的元素，但这里的情况看起来不像，因为您的所有四个元素都已呈现。

有没有可能是一个自定义的.map() 函数，它返回一个对象，而不是另一个数组？对象将以键迭代顺序呈现，这不一定保证跨浏览器一致。

【讨论】：

绝对是一个数组而不是一个对象，key是Django生成的id。我将把它移到我的嫌疑人名单的底部。当我逐步完成时，看起来 React 正确地渲染了元素，但随后它们在没有 React 重新渲染的情况下被重新排列。很奇怪。