React Check in a Array当item被检查时

Question

我有以下方法，当我点击一个元素时，我使它被选中，如果元素已经被选中，我使它未选中

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挂钩有一个其他数组的元素从已经创建的数组元素检查?

Answer 1

由于您的elementsChecked派生自elements，我建议创建一个从该状态计算的变量，而不是保留单一来源的真理原则。您可以使用useMemo来记忆它的值。

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

Answer 2

所以你需要像这样使用useEffect钩子:

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