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: [],
        },
      ],

但它通过将 第一个故事 放在数组的最后来重新排列故事。我用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]);

警告： setStories() 在 useEffect() 中，依赖性为 [stories] 会导致无限循环。但核心思想同上。

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

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

React.js sort data in useEffect

arrays

sorting

reactjs

use-effect

use-state