javascript - 过滤器状态在 React 中无法正常工作

Question

我的父组件从其子组件中检索检查的输入值。所以我有一个函数(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]);

What my function is supposed to do :

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

What it does :

• 好了，除了将值添加到新状态之外，完成上述所有任务。

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

我需要收集所有检查的值并将它们存储在状态中，然后再将其发送到 API。我设法在这个沙箱中表达我的“期望”:

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

它有效，唯一的区别是它在同一个组件中，并且使用 html form event 而不是 props Legacy。

Answer 1

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

1. 具有 checkedValues 状态的父组件，它调用“ListItem”子组件，将数据和状态作为props传递强>;
2. 一个 ListItem 组件，其中包含 handleCheck 函数并映射要显示的数据，并将信息和函数传递给每个映射的子项。
3. 一个 Item 组件，用于显示输入及其数据和 handleCheck 函数 + 处理其自己的 isChecked 状态，以根据动态修改 CSS其状态。

这个答案当然是根据我自己的目的和需求定制的。这不是最一般的，但它回答了我的问题，也许可以帮助别人。再次感谢@ChrisG的帮助