Javascript 如何使用react钩子实现多个复选框

我想使用react钩子在我的HTML页面上实现多个复选框

我尝试使用以下URL实现：。在提供的链接中，它是使用类组件完成的，并且工作正常，但是每当我使用React hook setCheckedItems更新checkbox checked status时，它不会重新呈现视图

视图第一次呈现时，console.log（）正在从复选框组件打印。单击复选框后，将调用函数handleChange，并checkedItems更新该值，但视图不会再次呈现（无console.log（）打印）。而且，{checkedItems.get（“check-box-1”）}也没有打印任何值

下面是我的示例代码

复选框示例：

import React, { useState } from 'react';
import Checkbox from '../helper/Checkbox';

const CheckboxExample = () => {
    const [checkedItems, setCheckedItems] = useState(new Map());

    const handleChange = (event) => {
        setCheckedItems(checkedItems => checkedItems.set(event.target.name, event.target.checked));
        console.log("checkedItems: ", checkedItems);
    }

    const checkboxes = [
        {
            name: 'check-box-1',
            key: 'checkBox1',
            label: 'Check Box 1',
        },
        {
            name: 'check-box-2',
            key: 'checkBox2',
            label: 'Check Box 2',
        }
    ];


    return (
        <div>
            <lable>Checked item name : {checkedItems.get("check-box-1")} </lable> <br/>
            {
                checkboxes.map(item => (
                    <label key={item.key}>
                        {item.name}
                        <Checkbox name={item.name} checked={checkedItems.get(item.name)} onChange={handleChange} />
                    </label>
                ))
            }
        </div>
    );
}
export default Example;

import React，{useState}来自“React”；
从“../helper/Checkbox”导入复选框；
常量复选框示例=（）=>{
const[checkedItems，setCheckedItems]=useState（newmap（））；
常量handleChange=（事件）=>{
setCheckedItems（checkedItems=>checkedItems.set（event.target.name，event.target.checked））；
log（“checkedItems:，checkedItems”）；
}
常量复选框=[
{
名称：'复选框-1'，
键：“checkBox1”，
标签：“复选框1”，
},
{
名称：'复选框-2'，
键：'复选框2'，
标签：“复选框2”，
}
];
返回(
选中项名称：{checkedItems.get（“check-box-1”）}

{
复选框。映射（项=>(
{item.name}
))
}
);
}
导出默认示例；

复选框：

import React from 'react';

const Checkbox = ({ type = 'checkbox', name, checked = false, onChange }) => {
    console.log("Checkbox: ", name, checked);

  return (<input type={type} name={name} checked={checked} onChange={onChange} /> )
}
export default Checkbox;

从“React”导入React；
const Checkbox=（{type='Checkbox'，name，checked=false，onChange}）=>{
日志（“复选框：”，名称，选中）；
返回（）
}
导出默认复选框；

我不认为使用

地图来表示州是最好的主意。

我使用一个普通的
对象实现了您的示例，它可以工作：


但是在这种情况下，我认为使用映射没有任何好处，除了可能更干净的语法使用
.get（）
和
.set（）
而不是
x[y]
似乎有点长，但是如果您将映射展开并将其应用于
新映射，您的组件将重新渲染。我认为在这里使用对象引用而不是
Map
效果最好


const{useState}=React
常量映射器=（）=>{
const[map，setMap]=useState（newmap（））；
常量addToMap=（）=>{
const RNDM=Math.random（）.toFixed（5）
set（`foo${RNDM}`，`bar${RNDM}`）；
setMap（新映射（[…映射]）；
}
返回(

{[…map].map（[v，k]）=>(

{k} ：{v}

))}

添加到地图
);
};
const rootElement=document.getElementById（“react”）；
render（，rootElement）
作为使用单个对象保存多个项目状态的补充，如果在单个渲染中更新多个项目，则更新不会按预期进行。渲染周期内较新的提交只会覆盖以前的提交

解决方案是将单个对象中的所有更改成批处理，并一次性提交，如下所示：

// An object that will hold multiple states
const [myStates, setMyStates] = useState({});

// An object that will batch all the desired updates
const statesUpdates = {};

// Set all the updates...
statesUpdates[state1] = true;
statesUpdates[state2] = false;
// etc...

// Create a new state object and commit it
setMyStates(Object.assign({}, myStates, statesUpdates));

这会让他的表演开始吗？看起来他是在使用checkedItems状态变量进行渲染，但他的代码看起来只是在更新setCheckedItems状态变量。我可能误解了though@abelito如果您运行链接的演示，您将清楚地看到
checked
属性对应于状态，即ckeckbox显示为checked以响应状态更新。啊，我现在看到了，很好@pawel感谢您的快速回复。使用这个对象是可行的。我想知道为什么使用Map不起作用。@Nakesh它可能与React内部有关。我确信
Map
和
Set
在Redux商店中使用时效果不好，这就是为什么我从这个角度来处理您的问题。不确定是否有官方消息称不应在React组件状态下使用它们，但从区别来看，在您的情况下映射对象似乎没有任何好处。是的，或者使用函数更新状态：
const handleChange = (event) => {
  // mutate the current Map
  checkedItems.set(event.target.name, event.target.checked)
  // update the state by creating a new Map
  setCheckedItems(new Map(checkedItems) );
  console.log("checkedItems: ", checkedItems);
}

// An object that will hold multiple states
const [myStates, setMyStates] = useState({});

// An object that will batch all the desired updates
const statesUpdates = {};

// Set all the updates...
statesUpdates[state1] = true;
statesUpdates[state2] = false;
// etc...

// Create a new state object and commit it
setMyStates(Object.assign({}, myStates, statesUpdates));