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

问题描述

我有一个包含一组对象的状态。对象代表工人。每个工人都有一个名称属性和一个嵌套对象（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）的状态。
我正在考虑一种方法，首先我会传播对象，然后将嵌套数组连接/推送到对象内部。

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

谢谢

标签： arraysreactjsobjectfilterstate

实现这一点的一种方法是让工人作为状态的固定工人和过滤工人。

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);

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

问题描述

解决方案

推荐阅读