React新手求助：如何通过State访问对象实现数值计算？

核心问题是状态变量访问路径错误或状态初始化不完整，导致无法正确从valores对象中取值。以下是对应需求的完整可运行实现方案：

1. 先明确valores对象结构示例 #

假设你的valores结构如下（如果实际结构不同，只需调整后续取值路径即可）：

const valores = {
  tipoA: {
    uIn1: { val: 2 },
    uIn2: { val: 3 }
  },
  tipoB: {
    uIn1: { val: 4 },
    uIn2: { val: 5 }
  }
};

2. 完整组件实现代码 #

import { useState } from 'react';

function ValueCalculator() {
  // 用useState维护三个控件的状态，初始值要匹配valores的键
  const [selectedTipo, setSelectedTipo] = useState('tipoA');
  const [selectedUIn, setSelectedUIn] = useState('uIn1');
  const [inputNum, setInputNum] = useState('0');

  // 计算结果：显式转换输入值为数值，避免字符串拼接问题
  const result = parseFloat(inputNum) * valores[selectedTipo][selectedUIn].val;

  return (
    <div>
      {/* 第一个下拉框 */}
      <select 
        value={selectedTipo} 
        onChange={(e) => setSelectedTipo(e.target.value)}
      >
        <option value="tipoA">Tipo A</option>
        <option value="tipoB">Tipo B</option>
      </select>

      {/* 第二个下拉框 */}
      <select 
        value={selectedUIn} 
        onChange={(e) => setSelectedUIn(e.target.value)}
      >
        <option value="uIn1">UIn 1</option>
        <option value="uIn2">UIn 2</option>
      </select>

      {/* 数值输入框 */}
      <input
        type="number"
        value={inputNum}
        onChange={(e) => setInputNum(e.target.value)}
        placeholder="输入数值"
      />

      {/* 结果展示：处理非数值输入的情况 */}
      <div>计算结果：{isNaN(result) ? '请输入有效数字' : result}</div>
    </div>
  );
}

export default ValueCalculator;

3. 关键问题修复点 #

• 取值路径错误：你之前写的valores[tipo[uIn[val]]]完全不符合对象取值逻辑，正确路径是valores[第一个下拉框状态][第二个下拉框状态].val，比如示例中的valores[selectedTipo][selectedUIn].val。
• 状态未正确维护：报错uIn未定义是因为你没把第二个下拉框的选中值存为独立状态变量，每个控件的选中/输入值都需要对应useState变量。
• 类型转换问题：输入框的值默认是字符串，必须用parseFloat/Number转成数值，否则会出现字符串拼接（比如"2"*3虽能自动转换，但显式转换更稳妥）。
• 初始值匹配：状态初始值必须是valores中存在的键，否则会触发undefined报错。

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