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]);

我的功能应该做什么：

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事件，而不是 props legacy 。

Answer 1

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

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

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

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

1 个答案: