React状态未按正确顺序进行映射
P粉476547076
P粉476547076 2024-03-31 09:23:01
0
1
428

我有一个使用 Redux 的 Next.js 项目。在我的商店中,有一组通过 Redux 减速器更新的状态。基本上是我在某些组件中经常使用的状态数组。

在我的一个减速器中,我对这个数组进行了排序。该数组充满了对象,我通过特定属性对其进行排序。当我 console.log 数组时,它似乎已经排序良好。

在我的一个组件中,我映射了这种排序状态。我在这里简化了逻辑。

names.map((p) => (
    <div key={p.name}>
      {p.firstname} {p.lastname}
    </div>
  ));

当 HTML 显示时,所有元素的顺序都不正确。最后几十个 div 元素似乎是有序的,但前十几个元素似乎是随机的。

例如,这是数组。

let names = [
    {
      "firstname": "Michael",
      "lastname": "Scott",
    },
    {
      "firstname": "Jim",
      "lastname": "Halpert",
    },
    {
      "firstname": "Dwight",
      "lastname": "Schrute",
    },
    {
      "firstname": "Pam",
      "lastname": "Beesly",
    },
    {
      "firstname": "Ryan",
      "lastname": "Howard",
    }
  ]

排序后,控制台日志记录将返回预期结果。这是排序函数。

names = names.sort((a, b) => a.firstname.localeCompare(b.firstname))

生成的 HTML 应该如下所示。

相反,结果由于某种原因而混乱。我怀疑这是由于 Redux 编辑状态造成的,但我不知道为什么。

据我所知,这是一个广泛的错误,如果我的代码过于简化,我很乐意提供任何额外的上下文。我们将不胜感激,但任何有助于缩小问题所在的答案都会特别有用。

P粉476547076
P粉476547076

全部回复(1)
P粉765684602

我正在使用 Redux 减速器对数组进行排序。尽管控制台记录正确,但元素显示的顺序是错误的。虽然我仍然不知道为什么会发生这种情况,但解决方案是不对减速器中的内容进行排序。

在 Redux 中,您应该通过选择器而不是直接对内容进行排序通过在我的选择器中而不是直接在我的减速器中对事物进行排序,问题自行解决了。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板