复选框选中并取消选中以删除react js中的值

Question

我正在尝试这个React plus类型脚本代码。

当我单击添加到引用的复选框数据时，但如果我取消选中任何复选框，则所有数据都将从cites:中删除

import React, {useState, useEffect, useRef} from "react";
const [cities, setCities] = useState<object[]>([]); 
const handleCheck = (e: any) => { 
if (e.target.checked) { setCities((oldArray:any) => [...oldArray, e.target.value]); } 
else { removeCities(e); console.log(cities) } 
}
const removeCities = (e:any) => { setCities([...cities.filter((city: any) => city !== e.target.value)]) }
function App() {
return (
<>
<form>
</form> <input type="checkbox" value={row.booking_id} onChange={(e) => {handleCheck(e)}} /> </>


);
}
export default App;

在这里，如果我在复选框值8中单击取消选中，该值将自动删除。我需要以前的值不删除

Answer 1

您的状态应该在函数组件内部，如下所示：

function App() {
const [cities, setCities] = useState([]); 
const handleCheck = (e) => { 
if (e.target.checked) { setCities((oldArray) => [...oldArray, e.target.value]); } 
else { removeCities(e); console.log(cities) } 
}
const removeCities = (e) => { setCities([...cities.filter((city) =>
city !== e.target.value)]) }

return (
<>
<form>
</form> 
<input type="checkbox" 
value={row.booking_id} onChange={(e) => {handleCheck(e)}} /> </>


);
}
export default App;

另外，你的jsx是错误的，所以试着修复它，然后重试