使用 useState 更新 React 中多个复选框的状态

Question

>
我是新手.js所以如果我第一次尝试没有得到所有内容，请道歉。

我的问题是我不明白如何使用钩子更新复选框的状态。

这是我用来生成复选框的代码(来自 react-bootstrap(：

复选框组件：

<Form.Group controlId="briefing">
{['Component1', 'Component2', 'Component3', 'Component4'].map((component)=>(
<Form.Check
custom
inline
label={component}
name={component}
type="checkbox"
id={`module-component-${component}`}
onChange={(e)=>handleComponentChange(e)}
/>
))}
</Form.Group>

handleComponentChange((：

const [inputs, setInputs] = useState({});
const handleComponentChange = (event) => {
event.persist()
setInputs(inputs=>({
...inputs,
components:{
...inputs.components,
name:event.target.name
}
}))  
}

来自我在此表单中的其他输入字段的...inputs。

这不是我想要的。状态正在更新，但被最后一个选中的项目覆盖：

{
"components":{
"name":"Component1"
},
"customfield_10313":"Input 1",
"customfield_10411":"Input 2",
"customfield_10405":"Input 3",
"customfield_10385":"input 4"
}

我希望看到的结果是这样的：

{
"components":[
{
"name":"Component1"
},
{
"name":"Component2"
},
{
"name":"Component3"
},
{
"name":"Component4"
}
]
}

我需要此结构进行 API 调用。

我知道您需要检查复选框是否已选中，如果是，则删除该项目。 这是我的下一个问题。

感谢您的任何意见！

Answer 1

由于您希望组件状态包含数组，因此需要像数组一样更新它。此外，当您取消选中复选框时，即当项目已经在数组中时，您还需要确保从列表中删除项目

const handleComponentChange = (event) => {
event.persist()
setInputs(inputs=>{
// find it component is already there. If yes remove it
const index = inputs.components.findIndex(item => item.name === event.target.name);
if(index > -1) {
return {
...inputs,
components: [
...inputs.components.slice(0, index),
...inputs.components.slice(index + 1),
]
}
} else {
// push item into array
return {
...inputs,
components: inputs.components.concat({name: event.target.name}),
}
}
}) 
}