时间戳

首页 > 解决方案 > 如何在 Firestore 上保存复选框的文本值？

javascript - 如何在 Firestore 上保存复选框的文本值？

问题描述

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

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

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

标签： javascriptreactjsfirebasegoogle-cloud-firestore

解决方案

我怀疑当您的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>

推荐阅读