無法讀取未定義的屬性（讀取“值”）反應功能組件

嗨，我正在嘗試學習反應并使用反應網站上的反應指南，其中有一個稱為提升狀態的示例。該示例在我嘗試使用功能組件的類組件中。原始示例的鏈接 [網站鏈接][1]

我在反應中無法讀取 undefied 的屬性。不知道要找什么

import React, { useState } from 'react';
import TempratureInputComponent from './TempratureInputComponent';

const TempratureCalculatorComponent = () => {
  const [waterTemprature, setwaterTemprature] = useState('');
  const [tempratureScale, settempratureScale] = useState('c');

  const handleCelsiusChange = (e) => {
    console.log(typeof e.target.value);
    const temp = Number(e.target.value);
    // console.log(waterTemprature);
    setwaterTemprature(temp);
    settempratureScale('c');
  };
  const handleFahrenheitChange = (e) => {
    // console.log(waterTemprature);
    setwaterTemprature(e.target.value);
    settempratureScale('f');
  };
  const toCelsius = (fahrenheit) => {
    return ((fahrenheit - 32) * 5) / 9;
  };
  const toFahrenheit = (celsius) => {
    return (celsius * 9) / 5   32;
  };
  const tryConvert = (waterTemprature, convertTo) => {
    const input = parseFloat(waterTemprature);
    if (Number.isNaN(input)) {
      return '';
    }
    const output = convertTo(input);
    const rounded = Math.round(output * 1000) / 1000;
    return rounded.toString();
  };
  const celsius =
    tempratureScale === 'f'
      ? tryConvert(waterTemprature, toFahrenheit)
      : waterTemprature;
  const fahrenheit =
    tempratureScale === 'c'
      ? tryConvert(waterTemprature, toCelsius)
      : waterTemprature;

  return (
    <>

      <TempratureInputComponent
        tempratureScale='c'
        waterTemprature={celsius}
        onTempratureChange={handleCelsiusChange}
      />
      <TempratureInputComponent
        tempratureScale='f'
        waterTemprature={fahrenheit}
        onTempratureChange={handleFahrenheitChange}
      />
    </>
  );
};

export default TempratureCalculatorComponent;

/* eslint-disable comma-dangle */
/* eslint-disable react/prop-types */
import React from 'react';

const TempratureInputComponent = ({
  tempratureScale,
  waterTemprature,
  onTempratureChange,
}) => {
  const scaleNames = {
    c: 'Celsius',
    f: 'Fahrenheit',
  };
  const handleTempratureChange = (e) => {
    console.log(e.target.value);
    onTempratureChange(e.target.value);
  };
  return (
    <div>
      <fieldset>
        <legend>Enter temperature in {scaleNames[tempratureScale]}</legend>
        <input value={waterTemprature} onChange={handleTempratureChange} />
      </fieldset>
    </div>
  );
};

export default TempratureInputComponent;

import "./App.css";
import TempratureCalculatorComponent from "./Components/TempratureCalculatorComponent";
const App = () => (
  <div className="App">
    <TempratureCalculatorComponent />
  </div>
);

export default App;

uj5u.com熱心網友回復：

您將值傳遞給onTempratureChange而不是e物件

  const handleTempratureChange = (e) => {
    console.log(e.target.value);
    onTempratureChange(e.target.value);
  };

正如您在上面的代碼段中看到的，您正在將值e.target.value作為引數傳遞 給onTempratureChange 函式。所以如果我輸入input元素，1那么你傳遞的1不是event物件本身

所以有兩種方法可以解決這個問題

1）要么將值作為引數發送

  const handleTempratureChange = (e) => {
    console.log(e.target.value);
    onTempratureChange(e.target.value);
  };

現場演示

并接收valueas 引數。所以你應該得到值onTempratureChange

  const handleCelsiusChange = (value) => {
    console.log(typeof value);
    const temp = Number(value);
    // console.log(waterTemprature);
    setwaterTemprature(temp);
    settempratureScale("c");
  };

2）或者您可以將event物件發送到onTempratureChange：

  const handleTempratureChange = (e) => {
    onTempratureChange(e);
  };

現場演示

并將e物件作為onTempratureChange函式中的引數獲取：

  const handleCelsiusChange = (e) => {
    const temp = Number(e.target.value);
    setwaterTemprature(temp);
    settempratureScale("c");
  };

標籤：javascript 反应

上一篇：視窗加載時轉換不起作用編輯

下一篇：Node.JS是否可以防止節點停止執行回圈依賴？