Comment filtrer les données d'un tableau dans React js et mettre à jour les données avec useState ?

Question

J'ai vraiment besoin d'aide parce que je suis encore en train d'apprendre sur react js et la structure des données, je veux demander comment filtrer les données d'un tableau spécifique de redux et pousser vers useState.

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",
},

],

Je transfère des données de redux et j'utilise un sélecteur pour obtenir des données du magasin redux.

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);
    // console.log(kategori);
  }, [datePortfo,kategori]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

je veux afficher des données spécifiques basées sur la catégorie, lorsque j'essaie avec mon code et que j'essaie de filtrer les données, je n'affiche qu'une seule donnée. s'il vous plaît aidez-moi, merci les gars :) je suis encore novice

Answer 1

Je pense que vous devriez le faire :

let filteredData = datePortfo;
if(kategori != "all")
  filteredData  = datePortfo.filter((data) =>  data.category === kategori);

setFilter(filteredData);

Answer 2

1. filter crée une copie du tableau, que vous devez enregistrer dans une variable. La fonction que vous passez à filter est un prédicat qui doit retourner soit true o false selon que la ligne est conservée ou non.

2. Le résultat de filter que vous avez enregistré peut être utilisé dans setFilteredData .