如何将多个复选框选中值存入数组并转字符串存入setAnswer状态？

问题根源 #

你的代码存在几个关键问题：

• 每次触发handleChange时都新建空数组selectedChoices，无法累积之前选中的选项
• 没有处理取消复选框选中的逻辑
• 最后没有调用setAnswer更新状态

修正后的代码实现 #

1. 调整handleChange函数 #

const handleChange = (e) => {
  const { value, type, checked } = e.target;

  // 根据当前状态初始化已选中的选项数组
  // 若answer.choice是字符串，先转成数组；如果是初始状态为空，设为[]
  let currentSelected = Array.isArray(answer.choice) 
    ? [...answer.choice] 
    : (answer.choice ? answer.choice.split(', ') : []);

  if (type === "radio") {
    // 单选逻辑：直接覆盖，转成字符串存入
    setAnswer(prev => ({ ...prev, choice: value }));
  } else if (type === "checkbox") {
    if (checked) {
      // 选中时添加选项，避免重复
      if (!currentSelected.includes(value)) {
        currentSelected.push(value);
      }
    } else {
      // 取消选中时移除选项
      currentSelected = currentSelected.filter(item => item !== value);
    }
    // 将数组转成字符串（用逗号分隔，可根据需求改分隔符），更新状态
    setAnswer(prev => ({ ...prev, choice: currentSelected.join(', ') }));
  }
};

2. 确保状态初始值正确 #

如果你的answer状态初始是对象，建议把choice初始化为空字符串或空数组：

const [answer, setAnswer] = useState({ choice: "" });
// 或者初始化为数组，后续转字符串存入
// const [answer, setAnswer] = useState({ choice: [] });

3. 映射渲染复选框的代码（补充选中状态回显） #

{choicesData.map((choice, index) => (
  <div key={index}>
    <input 
      className="toggle-button__state" 
      type="checkbox" 
      name="choice" 
      value={choice.choices} 
      onChange={handleChange}
      // 根据当前状态设置选中状态，刷新页面后能保留选择
      checked={answer.choice.split(', ').includes(choice.choices)}
    />
    <label>{choice.choices}</label>
  </div>
))}

关键说明 #

• 使用函数式更新setAnswer(prev => ...)，确保基于最新的状态值操作，避免闭包导致的状态不一致问题
• 处理了重复添加和取消移除的逻辑，保证选中选项的唯一性
• 最终将数组通过join(', ')转换为字符串存入状态，符合你的需求

内容的提问来源于stack exchange，提问作者Zurcemozz