为什么 Firestore 将数字存储为字符串？

Question

我有这个表格，我将在 Firestore 中提交它。我想将 counter 保存为数字而不是 Firestore 中的字符串。我已经将类型声明为“数字”，它仍然保存为字符串。

 const handleSubmit = (e) => {
    e.preventDefault();

    try {
      const userRef = firestore.collection("users").doc();
      const ref = userRef.set({
        ....,
        counter
      });
      console.log(" saved");
    } catch (err) {
      console.log(err);
    }
  };

    const [counter, setCounter] = useState(0);
   <Grid item>
            <TextField
              type="number"
              label="counter"
              fullWidth
              required
              value={counter}
              onChange={(e) => setCounter(e.target.value)}
            />
          </Grid>

Answer 1

输入总是字符串类型。

您可以在每次输入更改更新状态时转换为数字：

onChange={(e) => setCounter(Number(e.target.value))}

（正如@Dai 指出的valueAsNumber - HTMLInputElement）

valueAsNumber

double：返回元素的值，解释为 以下，按顺序：

• 时间价值
• 一个数字
• 如果无法转换，则为 NaN

onChange={(e) => setCounter(e.target.valueAsNumber)}

或者更新商店的时候转成数字：

const handleSubmit = (e) => {
  e.preventDefault();

  try {
    const userRef = firestore.collection("users").doc();
    const ref = userRef.set({
      ....,
      counter: Number(counter),
    });
    console.log(" saved");
  } catch (err) {
    console.log(err);
  }
};