React中的过滤器状态无法正常工作

问题描述 投票:1回答:1

我的父组件]从其子组件检索检查的输入值。所以我有一个函数((handleChecked)),它带有两个参数:一个'id'和一个已检查状态'isChecked'

const handleChecked = useCallback(({ id, isChecked }) => {

    const newCheckedValues = checkedValues.filter(current => current !== id);

    setCheckedValues(newCheckedValues);

    if (isChecked) {
        newCheckedValues.push(id);
        setCheckedValues(newCheckedValues);
    }
}, [checkedValues]);

我的功能应该做什么:

1-从单击的输入中获取ID和已检查状态,2-检查状态以获取重复的ID,3-如果存在,请将其删除,4-保存状态,5-如果选中,则将ID存储在临时数组中,6-保存新状态。

它做什么:

  • 嗯,除了将值添加到新状态之外,上述所有任务。

当我单击新输入]时,父“ checkedValues”状态为空,然后从零开始。这意味着作为过滤状态结果创建的临时数组也为空。现在,此函数只是在状态中添加一个id,然后将其替换为新单击的输入。

而且我需要收集所有检查的值

将它们存储在状态中,然后再将其发送到api。我设法在此沙箱中展示我的“期望”:

https://codesandbox.io/s/react-hooks-filter-state-array-toggle-input-checked-gz504

它有效,唯一的区别是它在同一组件中,并且使用html form event

而不是props legacy

我的父组件从其子组件检索选中的输入值。所以我有一个函数(handleChecked),它带有两个参数:一个'id'和一个选中的状态'isChecked':const ...

javascript reactjs react-hooks react-state-management
1个回答
0
投票

最后,我在3中解构了我的组件:

© www.soinside.com 2019 - 2024. All rights reserved.