Javascript 选中项时在数组中进行反应检查

我有以下方法，当我单击一个元素时，我将其选中，如果该元素已经选中，我将其取消选中

const [elements, setElements] = useState([]);

const handleElementClick = (index) => {
    setElements(prevState => {
        return prevState.map((element, i) => {
            if (i === index) {
                element.checked = !element.checked
            }
        return element
    })})  
}

现在我想创建另一个方法，在这里我可以创建一个元素数组

从这里开始

const [elementsChecked, setElementsChecked] = useState([]);

---

如何使用React钩子进行此检查，以便从已创建的数组元素中检查其他元素数组？

因此您需要像这样使用

useffect

钩子：

useEffect(() => {
  if(elements.length){
    setElementsChecked(elements.filter(element => element.checked));
  }
}, [elements])

---

由于您的

elementsChecked

是从

elements

派生的，因此我建议创建一个从该状态计算的变量，以保留单一的真值来源原则。你可以用它来记住它的价值

const elementsChecked = useMemo(() => elements.filter(element => element.checked), [elements])

---

你的元素有id吗？它们没有@Taghi Khavari你尝试过我的解决方案吗？我正在尝试，我不明白你为什么要使用效果，我想我只需要另一种方法，因为你的

elementsChecked

是从

元素衍生而来的

，不创建另一种状态来保存单一的真相来源将是一种更具反应性的方法，但是，相反，创建一个从

元素

派生的变量，如果我在方法中使用setElementsChecked，我会接近我的解决方案，就像这样=>@Koala7在链接的解决方案中

setElementsChecked

将始终使用以前版本的

元素

。调用

setElements

将在下一次渲染中更新

elements

，而不是在当前上下文中。@Koala7是的，@3limin4tOr是对的，如果这样做，您将落后一个周期。只需像上面那样使用

useffect