如何在 Firestore 上保存复选框的文本值？答案

【问题标题】：How can I save the text value of the checkbox on Firestore?如何在 Firestore 上保存复选框的文本值？
【发布时间】：2021-10-27 23:54:45
【问题描述】：

我每次提交时都会出现此错误：

TypeError: s.indexOf 不是函数

import React, { useState } from "react";

const checkboxes = [
  { id: 1, text: "Checkbox 1" },
  { id: 2, text: "Checkbox 2" },
  { id: 3, text: "Checkbox 3" }
];

const SearchResults = () => {
  const [selectedCheckbox, setSelectedCheckbox] = useState([]);

  const handleChange = (id) => {
    const findIdx = selectedCheckbox.indexOf(id);

    if (findIdx > -1) {
      selectedCheckbox.splice(findIdx, 1);
    } else {
      selectedCheckbox.push(id);
    }
    setSelectedCheckbox(selectedCheckbox);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(JSON.stringify(selectedCheckbox));
try {
      const userRef = db.collection("users").doc(uid);
      const ref = userRef.set({
        selectedCheckbox
      });
     console.log("done")
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div>
      <div className="App">
        <form onSubmit={handleSubmit}>
          {checkboxes.map((checkbox) => (
            <label key={checkbox.id}>
              {checkbox.text}
              <input
                type="checkbox"
                onChange={() => handleChange(checkbox.text)}
                selected={selectedCheckbox.includes(checkbox.id)}
              />
            </label>
          ))}
          <button type="submit">Submit</button>
        </form>
      </div>
      <p>Selected checkboxes: {JSON.stringify(selectedCheckbox)}</p>
    </div>
  );
};

这是代码框，虽然这里没有 Firestore 数据： https://codesandbox.io/s/handle-multiple-checkboxes-in-react-forked-xehxf?file=/src/App.js:0-2520

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

我怀疑当您的 selectedCheckboxes 跟踪数组变为 undefined 时错误会上升，即使在链接代码沙箱中情况并非如此。

在React中作为一般规则，你不应该改变状态即使使用 React 钩子，你在 handleChange 方法中就是这种情况。

你应该更新你的事件处理方法如下（总是复制状态数组来构造一个新的）：

const handleChange = (id) => {
    const findIdx = selectedCheckbox.indexOf(id);

    let selected;
    if (findIdx > -1) {
      selected = selectedCheckbox.filter((checkboxId) => checkboxId !== id);
    } else {
      selected = [...selectedCheckbox, id];
    }
    setSelectedCheckbox(selected);
};

您单击事件处理程序将复选框 id 作为参数，您应该相应地更新您的单击处理程序：

<label key={checkbox.id}>
    {checkbox.text}
    <input
        type="checkbox"
        onChange={() => handleChange(checkbox.id)}
        selected={selectedCheckbox.includes(checkbox.id)}
     />
</label>

【讨论】：