在 React 中，你使用什么值来初始化数字类型的状态变量？

Question

比方说，我有一个名为的状态变量amount，并且有一个输入字段，当我们输入该变量时，该输入字段会更改该变量。我不想将初始值显示为0。那么我应该用什么来初始化状态变量呢？我尝试初始化，null但控制台发出警告：

Warning: 'value' prop on 'input' should not be null.
Consider using the empty string to clear the component or 'undefined' for uncontrolled components.

我现在有两个问题：-

1. 为什么输入字段收到值为 时会引发警告null？我尝试谷歌搜索但无法得到明确的答案。
2. 我应该用什么来初始化数字类型状态变量？

Answer 1

让我一一回答你的两个问题：

1. 为什么输入字段收到值为 时会抛出警告null？

显示此警告是因为 React 期望受控value输入组件的 prop为, （或者如果输入类型为不受控¹）。当该值设置为 时，React 会将其视为不正确的值类型，因此会抛出警告以提醒您使用适当的值类型。stringnumberundefinednull

官方文档中需要注意的要点：²

传递给受控组件的值不应为未定义或为空。

2. 数字类型状态变量应该用什么来初始化？

如果您不想显示 的初始值0，可以使用空字符串 ( '') 初始化状态变量。这样，输入字段最初将显示为空，并且React不会抛出您收到的警告。这也是从官方文档²中推断出来的：

如果您需要初始值为空（例如下面的firstName 字段），请将状态变量初始化为空字符串('')。

const [amount, setAmount] = useState('');

  const handleChange = (e) => {
    // do whatever you want with amount by parsing it to number
    setAmount(e.target.value);
  };
...
<input type="number" value={amount} onChange={handleChange} />

演示在这里

参考文献和延伸阅读：

1. React 中的受控和非受控组件

2. 使用状态变量控制输入

3. 在 Javascript 中将字符串转换为数字