Javascript 过滤器状态不为'；在反应器中不能正常工作

我的父组件从其子组件检索选中的输入值。 所以我有一个函数（handleChecked），它接受两个参数：一个是“id”，另一个是“isChecked”：

我的职能应该做什么：

1-从单击的输入中获取id和已检查状态， 2-检查状态是否存在重复id， 3-如果存在，将其拆下， 4-拯救国家， 5-如果选中，则将id存储在临时数组中， 6-保存新状态

它的作用是：

• 好的，除了向新状态添加值之外，上面所有的任务都完成了

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

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

---

它可以工作，唯一的区别是它在同一个组件中，使用html表单事件，而不是传统道具

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

具有

checkedValues

状态的父组件，该组件调用“ListItem”子组件，将数据和状态作为道具传递

一个ListItem组件，其中包含

handleCheck

函数并映射要显示的数据，将信息和函数传递给每个映射的子项

一个项组件，它显示一个带有数据的输入，

handleCheck

函数+处理自己的

isChecked

状态，以根据其状态动态修改CSS

---

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

您正在呼叫

setCheckedValues（newCheckedValues）

两次，一次不带

id

通过旧数组，然后再次带

id

进入。状态更新是异步的；如果。。。先按，然后调用

setCheckedValues（newCheckedValues）最后一次。嗨，克里斯，谢谢你的回答。我确实想到了这一点，但不幸的是，这并没有改变问题。起初我认为过滤函数是问题所在，但它完成了它的工作：如果单击相同的输入，
isChecked
将变为false，并且该值将从状态中删除。所以我仍然有我的“加法”问题。我在看沙箱，它似乎工作得很好？编辑：没有读最后一句话，给我一秒钟好吧，这是我的解决方案：那么解决方案就是将函数传递给孩子？我不确定您是否可以使用状态设置器作为道具…除非父级和子级必须位于同一文件/组件中？我会尽快处理，然后告诉你。
const handleChecked = useCallback(({ id, isChecked }) => {

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

    setCheckedValues(newCheckedValues);

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