如果 obj. 属性在 React.js 中为真，则按属性过滤 JSON 结果

Question

我试图使用 React 检索和过滤 JSON 数据.js也许还有钩子，但我没有任何好方法可以做到这一点。刚才我在本地有我的 JSON 数据，所以它不是来自 restAPI 或类似(目前(......我试图创建一个带有按钮的菜单，当我单击它们时，我会得到过滤的数据。我知道。。。这样做应该不是很困难(因为我已经以一种基本的方式为条件这样做了，根据某些属性是否为真而显示不同的图标。 但无论如何，我正在努力解决这个问题。

这是我的代码：

import React, {setState, useState} from 'react';
export const ByCourse = () => {
const projects = window.projects.aaData;
console.log('window.projects = ', projects);
return (
<div className="section-component">
<h2 className="mt-2 mb-4">By Course</h2>
<ul className="nav nav-tabs">
<li className="nav-item">
<a className="nav-link active" href="#">
All
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Favorite
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Recent
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Assigned
</a>
</li>
</ul>

<div className="container">
{projects.map(project => {
return(
<div className="row">
<div className="w-100">
<div className="d-flex border mt-1 mb-1 p-3">
<div className="col-1">
{project.favorite ? <i className="fa fa-star"></i> : <i className="fa fa-star-o"></i>}
</div>
<div className="col-11">
<div className="font-weight-bold"> {project.projectTitle}</div>
<div className="font-weight-normal"> {project.ouName}</div>
</div>
</div>
</div>
</div>
)})}
</div>
</div>
);};

我的数据如下所示：

projects = {"aaData":
[
{
"index":0,
"projectTitle":"123",
"userTitle":"VVS-teknik grund",
"ouName":"fertest1",
"orgUnitId":1022,
"projectId":2014,
"favorite":false,
"recent":false,
"userAssigned":false,
"projectStatus":"ACTIVE",
"viewLink":"http://xxxxxx
},
{
"index":1,
"projectTitle":"AAA",
"userTitle":"AAA",
"ouName":"fertest1",
"orgUnitId":1022,
"projectId":2002,
"favorite":false,
"recent":true,
"userAssigned":false,
"projectStatus":"ACTIVE",
"viewLink":"http://xxxxxx
},
{
"index":2,
"projectTitle":"Activity with image and text",
"userTitle":"asdas",
"ouName":"ferfer AB",
"orgUnitId":1004,
"projectId":1892,
"favorite":false,
"recent":false,
"userAssigned":true,
"projectStatus":"NEW",
"viewLink":"http://xxxxxx"
}]

我尝试从这里使用解决方案：按类别过滤 JSON 结果 - React Hooks 但是我收到一个WEBPACK_1错误并且无法修复它...

我也在这里做了一个非常基本的过滤：

{project.favorite ? <i className="fa fa-star"></i> : <i className="fa fa-star-o"></i>}

基本上我正在寻找的是：

如果属性"收藏夹"为 true，则显示结果> Attr 收藏夹为 true 还 如果属性"最近"为真 ->则仅显示属性最近的结果 == true 提前非常感谢您，任何帮助都将非常非常受欢迎。

Answer 1

下面是一个使用useState设置过滤器的工作示例：

https://codesandbox.io/s/crazy-turing-jd3ym?fontsize=14&hidenavigation=1&theme=dark

Answer 2

首先，过滤或这些函数与 React.js 无关。这是关于JavaScript的。

老实说，我会尽量去，我对你的问题一无所知。你能只写你的问题吗？

注意：不要混合使用条件关键字或类似的东西。 如果您清楚地写出问题，我们将(i(为您提供帮助。 奖励：我重构了你的代码。

此处更改列表： 1-我删除了不必要的导入 2-分离您的代码。制作组件。 3- 压痕 4- 短条件(修复重复代码(

import React from 'react';
const Project = data => (
<div className="row">
<div className="w-100">
<div className="d-flex border mt-1 mb-1 p-3">
<div className="col-1">
<i className={data.favorite ? "fa fa-star" : "fa fa-star-o"} />
</div>
<div className="col-11">
<div className="font-weight-bold"> {data.projectTitle}</div>
<div className="font-weight-normal"> {data.ouName}</div>
</div>
</div>
</div>
</div>
);
export const ByCourse = () => {
const projects = window.projects.aaData;
console.log('window.projects = ', projects);
return (
<div className="section-component">
<h2 className="mt-2 mb-4">By Course</h2>
<ul className="nav nav-tabs">
<li className="nav-item">
<a className="nav-link active" href="#">
All
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Favorite
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Recent
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Assigned
</a>
</li>
</ul>
<div className="container">
{projects.map(project => <Project data={project} />)}
</div>
</div>
);
};

Answer 3

我假设你想显示favorite OR recent: true的对象，

1(一个简单的方法是：

let projects = {
"aaData": [{
"index": 0,
"projectTitle": "123",
"userTitle": "VVS-teknik grund",
"ouName": "fertest1",
"orgUnitId": 1022,
"projectId": 2014,
"favorite": true,
"recent": false,
"userAssigned": false,
"projectStatus": "ACTIVE",
"viewLink": "http://xxxxxx"
},
{
"index": 1,
"projectTitle": "AAA",
"userTitle": "AAA",
"ouName": "fertest1",
"orgUnitId": 1022,
"projectId": 2002,
"favorite": false,
"recent": true,
"userAssigned": false,
"projectStatus": "ACTIVE",
"viewLink": "http://xxxxxx"
},
{
"index": 2,
"projectTitle": "Activity with image and text",
"userTitle": "asdas",
"ouName": "ferfer AB",
"orgUnitId": 1004,
"projectId": 1892,
"favorite": false,
"recent": false,
"userAssigned": true,
"projectStatus": "NEW",
"viewLink": "http://xxxxxx"
}
]
}
for (let iterator = 0; iterator < projects.aaData.length; iterator++) {
if (projects.aaData[iterator].favorite || projects.aaData[iterator].recent) {
console.log(projects.aaData[iterator])
} else {
continue;
}
}

2(其他方法是：

let projects = {
"aaData": [{
"index": 0,
"projectTitle": "123",
"userTitle": "VVS-teknik grund",
"ouName": "fertest1",
"orgUnitId": 1022,
"projectId": 2014,
"favorite": true,
"recent": false,
"userAssigned": false,
"projectStatus": "ACTIVE",
"viewLink": "http://xxxxxx"
},
{
"index": 1,
"projectTitle": "AAA",
"userTitle": "AAA",
"ouName": "fertest1",
"orgUnitId": 1022,
"projectId": 2002,
"favorite": false,
"recent": true,
"userAssigned": false,
"projectStatus": "ACTIVE",
"viewLink": "http://xxxxxx"
},
{
"index": 2,
"projectTitle": "Activity with image and text",
"userTitle": "asdas",
"ouName": "ferfer AB",
"orgUnitId": 1004,
"projectId": 1892,
"favorite": false,
"recent": false,
"userAssigned": true,
"projectStatus": "NEW",
"viewLink": "http://xxxxxx"
}
]
}
let filteredArrayWithNull = projects.aaData.filter((object) => {
return object.favorite || object.recent ?
object : null
})
let finalFilteredArray = filteredArrayWithNull.filter((object) => object!=null)
console.log(finalFilteredArray);

要了解有关filter()的更多信息;这是一个综合指南