Question

我有一个包含对象数组的状态。对象代表工人。每个工作人员都有一个名称属性和一个嵌套对象（projects2021）。在嵌套对象内有对象数组（projectsList）：

    [{
     name: 'John',
     projects2021: {
         hours: 15,
         projectsAll: 10,
         projectsNames: ['x', 'y', 'z'],
         projectsList: [

             {
                 month: 'january',
                 projectName: 'germany',
                 status: 'vodja',
                 hours: 50,
             },
             {
                 month: 'february',
                 projectName: 'germany',
                 status: 'vodja',
                 hours: 50,
             },


         ],
     },
 },
 {
     name: 'David',
     projects2021: {
         hours: 15,
         projectsAll: 10,
         projectsNames: ['x', 'y', 'z'],
         projectsList: [
             {
                 month: 'january',
                 projectName: 'germany',
                 status: 'vodja',
                 hours: 50,
             },
             {
                 month: 'february',
                 projectName: 'germany',
                 status: 'vodja',
                 hours: 50,
             },


         ],
     },
 }

]

const [workers, setWorkers] = useState(users);

我想绘制州地图并以仅显示给定月份的项目的方式呈现工作人员。例如，如果我点击“一月”，我希望显示所有工人（他们的名字），但仅显示“月”的项目“一月”的属性。通俗地说：按给定月份过滤表格。这是我到目前为止所做的：
```
 const filterByMonth = (month) => {
 let mainArray = [];
 workers.map((worker) => {
     const result = worker.projects2021.projectsList.filter(
         (data) => data.month === month
     );
     mainArray.push(result)

 });
 setWorkers(mainArray);
```
};
通过我的方法，我直接改变状态（这是不正确的），从而松开对象的某些部分。我想保留我的对象，只更改嵌套对象数组 (projectsList) 的状态。
我在想一种方法，先传播对象，然后将嵌套数组连接/推送到对象内部。

如果我的问题没有按照应有的方式组织，我深表歉意，但这是我第一次发帖，我是一个自学成才的人:)

谢谢

Answer 1

您可以使用传播来实现它。这是一个示例：

const filterByMonth = (month) => {
   const result = workers.map((worker) => {
       return {...worker , projects2021: worker.projects2021.projectsList.filter(data => data.month === month)}
   });
   setWorkers(result);
};

Answer 2

实现此目的的一种方法是让工作人员作为状态不变且经过过滤的工作人员。

const workers= [{
 name: 'John',
 projects2021: {
     hours: 15,
     projectsAll: 10,
     projectsNames: ['x', 'y', 'z'],
     projectsList: [
         {
             month: 'january',
             projectName: 'germany',
             status: 'vodja',
             hours: 50,
         },
     ],
 },
 {...}]
const [filteredWorkers, setFilteredWorkers]=useState(workers)

然后对状态应用过滤

const filterByMonth = (month) => {
 let newWorkers = workers.filter((worker)=> worker.projects2021.projectsList.month === month);

 setFilteredWorkers(newWorkers);

React - 过滤嵌套数组并更新状态

2 个答案: