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

Question

我有一个 useState 挂钩名称故事。

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

现在我想在 1st Story 中添加 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: [],
        },
      ],

但它通过将 1st Story 放在数组的最后来重新排列故事。 我使用 useEffect 挂钩对其进行排序

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

日志将排序后的故事返回给我，但在 HTML/JSX 中它不起作用。

Answer 1

Array.sort() 对数组进行就地排序。

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

喜欢，

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

警告： useEffect() 内的 setStories() 与 [stories] 的依赖关系可能会导致无限循环。但核心思想与上述相同。

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort