React中从Redux过滤数组数据并更新useState的问题求助

我正在学习React.js与数据结构，需要实现根据category过滤Redux中的数组数据，并将结果更新到useState中，但当前代码仅能展示1条数据，恳请帮助。

Redux中的数据： #

dataPortfo: [
{
  id: 0,
  title: "Retne Cms",
  link: "www.google.com",
  image: "/images/a1.png",
  category: "website",
},
{
  id: 1,
  title: "Jaramba",
  link: "",
  image: "/images/a1.png",
  category: "website",
},
{
  id: 2,
  title: "Atisiri Quiz Web",
  link: "",
  image: "/images/a2.png",
  category: "website",
},
{
  id: 3,
  title: "Retne Cms",
  link: "www.google.com",
  image: "/images/a1.png",
  category: "mobile",
},
{
  id: 4,
  title: "Retne Cms",
  link: "www.google.com",
  image: "/images/a1.png",
  category: "mobile",
},
]

当前代码： #

const datePortfo = useSelector(selectPortfo);
const [kategori, setKategori] = useState("all");
const [filterData, setFilter] = useState([]);
  
  
const checkKategori = () => {
  if (kategori === "website") {
    console.log("web");
    datePortfo.filter((data) => {
      if (data.category === "website") {
        console.log(data.category);
        setFilter([data]);
      }
    });
  }
  if (kategori === "mobile") {
    console.log("mob");
  }
  if (kategori === "all") {
    console.log("all");
  }
};

useEffect(() => {
  checkKategori();
  console.log(filterData);
}, [datePortfo,kategori]);

问题原因： #

你在filter循环里每次调用setFilter([data])，这会把filterData反复重置为只包含当前遍历到的单个元素的数组，最终只会保留最后一个符合条件的元素，所以只显示1条数据。

修正方案： #

方案1：优化过滤逻辑，一次性设置过滤结果

先通过filter得到所有符合条件的数组，再一次性更新到state中：

const datePortfo = useSelector(selectPortfo);
const [kategori, setKategori] = useState("all");
const [filterData, setFilter] = useState([]);
  
  
const checkKategori = () => {
  let result = [];
  if (kategori === "website") {
    result = datePortfo.filter(data => data.category === "website");
  } else if (kategori === "mobile") {
    result = datePortfo.filter(data => data.category === "mobile");
  } else if (kategori === "all") {
    result = [...datePortfo]; // 复制原数组
  }
  setFilter(result);
};

useEffect(() => {
  checkKategori();
}, [datePortfo, kategori]);

方案2：无需单独维护filterData state（更推荐）

其实不需要额外的filterData state，直接在渲染时根据kategori计算过滤结果即可，这样能减少不必要的state更新，代码更简洁：

const datePortfo = useSelector(selectPortfo);
const [kategori, setKategori] = useState("all");

// 用useMemo缓存计算结果，避免重复过滤
const filterData = useMemo(() => {
  if (kategori === "website") {
    return datePortfo.filter(data => data.category === "website");
  } else if (kategori === "mobile") {
    return datePortfo.filter(data => data.category === "mobile");
  }
  return datePortfo;
}, [datePortfo, kategori]);

// 渲染时直接使用filterData即可

说明： #

• 方案1通过一次性设置过滤后的完整数组，解决了多次重置state的问题；
• 方案2使用useMemo缓存计算结果，避免每次渲染都重复过滤，性能更优，同时减少了state的维护成本。

内容的提问来源于stack exchange，提问作者irahama