reactjs - 使用新数据更新时，React 不会使用过滤函数更新深层嵌套对象数组中的变量状态

Question

我在 React 中有以下代码，

let [employee, setEmployee] = useState([])
let employeeList = [
    {
        "data": [
            {
                "name": "John",
                "email": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="761c191e1836130e171b061a135815191b" rel="noreferrer noopener nofollow">[email protected]</a>",
                "status": "passed"
            },
            {
                "name": "Jane",
                "email": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="197378777c597c61787469757c377a7674" rel="noreferrer noopener nofollow">[email protected]</a>",
                "status": "failed"
            }
        ]
    }
]

初始化时，我们给出如下，

setEmployee(employeeList)

它正确地在表中显示了两行状态为“通过”和“失败”的员工。

顶部有一个选择框，当选择“通过”时，我们用以下函数过滤它，

setEmployee(employee => employee[0].data.filter((ele, i) => ele.status === 'passed'));

我看到以下已过滤的员工状态变量，

// employee (state variable, see the original array of object of arrays is distorted here)
    [
        {
            "name": "John",
            "email": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbb1b4b3b59bbea3bab6abb7bef5b8b4b6" rel="noreferrer noopener nofollow">[email protected]</a>",
            "status": "passed"
        }
    ]

而不是，

[
    {
        "data": [
            {
                "name": "John",
                "email": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ee4e1e6e0ceebf6efe3fee2eba0ede1e3" rel="noreferrer noopener nofollow">[email protected]</a>",
                "status": "passed"
            }
        ]
    }
]

我是 React 状态新手，无法实现上述格式。原始员工状态变量在结构上应该是完整的，但只应过滤其深层数组。我想我在队列中犯了一些错误，

setEmployee(employee => employee[0].data.filter((ele, i) => ele.status === 'passed'));

非常感谢任何帮助。请不要建议像 useMemo 这样的高级概念，但让我们稍微修改一下以实现我想要的。谢谢。

Answer 1

不确定我的问题是否正确，但似乎在选中选择框时您返回的状态，您将以不同的结构返回状态。

过滤器函数返回一个数组，但在您首次初始化状态员工时具有不同的结构。

我自己尝试了一下，成功过滤了employeeList，没有修改你初始状态的原始结构。

    const handlePassed = () => {
    const newEmployeeList = employee.map((item) => {
        return {
            ...item,
            data: item.data.filter((employee) => employee.status === 'passed'),
        };
    });
    setEmployee(newEmployeeList);
};

我不确定这是否是更新您的状态的有效算法，但我希望这是解决您的问题的起点。

快乐编码