通过Input修改变量状态时触发'invalid BigNumber'错误求助

问题背景 #

原本硬编码const voteIdMainnet = 9时投票功能正常运行，改用React状态管理后触发BigNumber错误：

Error: invalid BigNumber value (argument="value",
value={"voteIdMainnet":"1"}, code=INVALID_ARGUMENT,
version=bignumber/5.7.0)

错误原因 #

你错误地将voteIdMainnet从单个数值类型改成了对象类型，而投票功能需要的是能被BigNumber解析的纯数值（数字或字符串形式的数字），传入对象自然会触发参数无效错误。

修复步骤 #

1. 修正状态初始化 #

保持voteIdMainnet为单个值类型，而非对象：

const [voteIdMainnet, setVoteIdMainnet] = useState(''); // 初始为空字符串，或根据需求设为0

2. 简化handleChange函数 #

直接更新单个状态值，不需要对象展开操作：

const handleChange = (event) => {
  // 若投票功能要求数字类型，可转成整数；否则直接存字符串即可
  setVoteIdMainnet(event.target.value);
  // 可选转数字写法：setVoteIdMainnet(parseInt(event.target.value, 10));
}

3. 修正输入框的value绑定 #

因为状态是单个值，直接绑定voteIdMainnet即可，无需访问对象属性：

<div>
  <input
    type="number"
    className="HeroInputLarge"
    name="voteIdMainnet"
    value={voteIdMainnet}
    onChange={handleChange}
  />
</div>

修复原理 #

现在voteIdMainnet会是单个的字符串或数字，符合BigNumber对参数的要求，投票功能就能正常接收参数了。

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