如何将inputValue状态中的latitude与longitude值合并展示在单个input框中

首先你需要先修正状态的初始定义，你原来的初始值设为空字符串，但后续inputValue需要存储包含latitude和longitude两个属性的对象，直接读取空字符串的属性会抛出错误，先调整初始值：

// 初始值可以设置为带两个空属性的对象，也可以根据业务需求填入默认经纬度
const [inputValue, setInputValue] = useState({ latitude: '', longitude: '' })

之后直接在input的value属性中用模板字符串拼接两个属性的值即可，分隔符可以按照你的需求自定义，比如用逗号加空格分隔：

<input 
  value={`${inputValue.latitude}, ${inputValue.longitude}`}
  {/* 如果需要支持用户手动输入修改值，可以补充onChange处理逻辑，参考示例如下 */}
  onChange={(e) => {
    const [lat, lng] = e.target.value.split(',').map(item => item.trim())
    setInputValue({
      latitude: lat ?? '',
      longitude: lng ?? ''
    })
  }}
/>

如果业务场景中inputValue有可能出现为undefined的情况，可以加可选链操作符规避报错：

value={`${inputValue?.latitude || ''}, ${inputValue?.longitude || ''}`}

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