Arrays React.js在useffect中对数据进行排序

我有一个useState钩子的名字

const [stories, setStories] = useState([
{
      name: "1st Story",
      sid: 1,
      apartmentDetails: [],
},{
      name: "2nd Story",
      sid: 2,
      apartmentDetails: [],
}
]); 

现在我想在第一个故事中添加公寓详细信息。为了实现此功能，我将执行以下操作

let story = stories.find((story) => story.sid == storyID);
    const storyWithDetails = {
      ...story,
      appartmentDetails: [
        ...story.appartmentDetails,
        {
          apartment_name: apratmentName,
          apartment_num: apratmentNum,
          apartment_type: apartmentType,
          areaDetails: [],
        },
      ],

但是它通过将第一个故事放在数组的最后来重新排列故事。 我用useffect钩子对它进行排序

  useEffect(() => {
    setStories(stories.sort((a, b) => parseInt(a.sid) - parseInt(b.sid)));
    console.log(stories);
  }, [stories]);

日志正在返回已排序的故事，但在HTML/JSX中它不起作用。

Array.sort（）

将数组排序到位。

尝试将其存储到另一个变量并设置状态

像

注意：

setStories（）

在依赖项为

[stories]

的

useffect（）

内部可能会导致无限循环。但核心思想与上文相同

---

参考：

你说它不工作是什么意思，你在页面中的输出是什么。未在页面中获取已排序的故事未使用CDode您是否也尝试了已编辑的代码？这不是很有效吗？如果我编辑它，它会工作，但应该会自动工作。sort实际上也会返回一个排序的数组。。对吗？@HamzaAfzal编辑的代码之所以有效，是因为您基本上使用的是变异数组。React不理解如果你改变状态，状态已经改变。因此，您需要使用spread操作符创建一个新数组，并对该数组进行排序

useEffect(() => {
    const newStories = [...stories];
    newStories.sort((a, b) => parseInt(a.sid) - parseInt(b.sid));
    setStories(newStories);
  }, [stories]);