过滤器状态在 React 中无法正常工作答案

【问题标题】：Filter state doesn't work correctly in React过滤器状态在 React 中无法正常工作
【发布时间】：2020-03-24 03:50:06
【问题描述】：

我的父组件从其子组件中检索选中的输入值。所以我有一个函数 (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”状态为空，并从无开始。这意味着作为过滤状态的结果创建的临时数组也是空的。现在，这个函数只是在 state 中添加一个 id，然后用新的点击输入替换它。

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

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

它可以工作，唯一的区别是它在同一个组件中并且使用 html form event 而不是 props legacy。

【问题讨论】：

您调用了两次setCheckedValues(newCheckedValues);，一次传递了没有id 的旧数组，然后又传递了id 在里面。状态更新虽然是异步的；你应该先做if ... push，然后在最后打电话给setCheckedValues(newCheckedValues);。
嗨，克里斯，感谢您的回答。我确实想到了这一点，但不幸的是它并没有改变问题。起初我认为 filter 函数 是问题，但它完成了它的工作：如果我单击相同的输入，isChecked 变为 false，并且该值从状态中删除。所以我仍然有我的“加法”问题。
我正在查看沙盒，它似乎工作正常？编辑：没看最后一句话，给我一秒钟
好的，这是我的解决方案：codesandbox.io/s/…
所以解决方案是将函数传递给孩子？我不确定您是否可以使用State setter 作为道具...除非父母和孩子必须在同一个文件/组件中？我会尽快解决这个问题并告诉你。

标签： javascript reactjs react-hooks react-state-management

【解决方案1】：

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

具有checkedValues 状态的Parent 组件调用“ListItem”子级，将数据和状态 作为props 传递；李>
一个 ListItem 组件，其中包含 handleCheck 函数并映射要显示的数据，将信息和函数传递给每个映射的子节点。
Item 组件显示输入及其数据和handleCheck 函数+ 处理其自己的isChecked 状态以根据其状态动态修改CSS。

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

【讨论】：