我真的需要帮助,因为我还在学习Reaction js和数据 struct ,我想问一下如何从redux中过滤特定的数组数据并推送到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",
},

],

以上数据来自redux,我使用Selector从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>

我想显示基于类别的特定数据,当我try 与我的代码,并试图过滤数据只显示1个数据.请帮帮我,谢谢你们:)我还是个新手

推荐答案

我认为你应该这么做:

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

setFilter(filteredData);

Javascript相关问答推荐

使脚本兼容于其他YouTube URL格式

将下拉分区与工具提示结合起来

使用Astro和React的动态API

无法在page. evalve()内部使用外部函数

使用CDO时如何将Vue组件存储在html之外?

容器如何更改默认插槽中子项的显示?

禁用从vue.js 2中的循环创建的表的最后td的按钮

如何获取转换字节的所有8位?

TypScript界面中的Infer React子props

我应该绑定不影响状态的函数吗?'

点击按钮一次有文本出现和褪色,而不是点击两次?(html,CSS,JavaScript)

查询参数未在我的Next.js应用路由接口中定义

如何将数组用作复合函数参数?

第三方包不需要NODE_MODULES文件夹就可以工作吗?

Reaction组件在本应被设置隐藏时仍显示

邮箱密码重置链接不适用于已部署的React应用程序

按下单键和多值

在D3条形图中对具有相同X值的多条记录进行分组

如果NetSuite中为空,则限制筛选

与在编剧中具有动态价值的定位器交互