React使用函数计算prop属性值时触发Invalid value for prop value报错

• 代码第120行未注释时可正常运行
• 替换为第121行代码（目的是给第98行定义的函数添加额外逻辑）后，运行报错：Invalid value for prop <code>value</code>

这是React受控组件的常见类型错误，核心原因是替换代码后，传给表单元素value属性的值不符合类型要求：

• 最常见的情况是直接把第98行的函数引用传给了value属性，没有加括号执行函数，导致value实际接收到的是函数对象，而非函数运行后的返回值
• 另一种可能是第98行的函数存在逻辑分支漏写返回值，部分场景下返回了undefined、普通对象、Symbol等value属性不支持的类型

• 检查第121行的传值逻辑：如果要使用第98行函数的计算结果作为value，必须加括号执行函数、传入对应参数，不能直接传函数名
  错误写法：

  // 直接传函数引用，value拿到函数类型值，触发报错
  <input value={calcFieldValue} />
  

  正确写法：

  // 执行函数拿到返回值后再传给value属性
  <input value={calcFieldValue(/* 传入业务所需参数 */)} />
  

• 补全第98行函数的所有分支返回逻辑，确保任何执行路径下，函数都返回字符串、数字这类表单value支持的合法基础类型值，避免返回非法类型。

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