为什么要获取指定值“Result”？无法解析，或者超出范围？

Question

我有一个临界角计算器作为 ReactJs 组件。但我在单击“计算”按钮时收到此警告：无法解析指定的值“Result”或超出范围。有人能指出错误吗？下面提到了组件的代码:

 const CriticalAngle = () => {
    const [n1, setN1] = useState(null);
    const [n2, setN2] = useState(null);
    const [result, setResult] = useState(null);
    const calcResult=()=>{
      setResult(57.29578*Math.asin(n2/n1));
    }
    
    return (
      <>
        <Form>
          <Form.Group className="mb-4">
            <Form.Label>Refractive Index of Incident Medium(Denser Medium)</Form.Label>
            <Form.Control
              type="number"
              placeholder="Enter the value of n1"
              onChange={(e) => setN1(Number(e.target.value))}
              value={n1 === null ? "" : n1}
            />
          </Form.Group>
          <Form.Group className="mb-4">
            <Form.Label>Refractive Index of Refractive Medium(Rarer Medium)</Form.Label>
            <Form.Control
              type="number"
              placeholder="Enter the value of n2"
              onChange={(e) => setN2(Number(e.target.value))}
              value={n2 === null ? "" : n2}
            />
          </Form.Group>
          <Form.Group className="mb-4">
            <Form.Label>Critical Angle</Form.Label>
            <Form.Control
              type="number"
              disabled="true"
              value={result === null ? "Result" : result}
            />
          </Form.Group>
        </Form>
        <div className="button-custom-grp">
          <Button variant="primary" onClick={calcResult}>
            Calculate
          </Button>

       
        </div>
      </>
    )
  }

Answer 1

好吧，我不知道这些标签是什么，但这是我的猜测...

临界角的控制被标记为 type="number"，因此它不喜欢不符合的值数字，就像字符串“Result”一样。

相反，你可以尝试这样的事情。我使用 Form.Label 标记来包装“Result”字符串，但我认为还有更好的方法。

      <Form.Group className="mb-4">
        <Form.Label>Critical Angle</Form.Label>
        {result === null
           ? (
             <Form.Label>Result</Form.Label>
           ) : (
             <Form.Control
                type="number"
                disabled="true"
                value={result === null ? "Result" : result}
             />
           )
        }
      </Form.Group>

我无法提供更多帮助。