React函数组件实现状态提升时报Cannot read properties of undefined错误如何解决

问题原因 #

你的报错是参数传递不匹配导致的：

• 子组件TempratureInputComponent的handleTempratureChange方法里，调用父组件传入的onTempratureChange时，直接传递了e.target.value（输入框的字符串值）
• 但父组件的handleCelsiusChange、handleFahrenheitChange两个方法，都默认接收的是事件对象e，尝试读取e.target.value时，实际拿到的e已经是字符串值，不存在target属性，因此抛出该错误。

另外你还有一处逻辑错误：温度转换函数调用写反了，会导致转换结果不符合预期。

修复方案 #

方案1：修改父组件的处理函数，直接接收值 #

把父组件的两个change方法改成直接接收输入值，不需要再读target：

// 修改handleCelsiusChange
const handleCelsiusChange = (value) => {
  console.log(typeof value);
  const temp = Number(value);
  setwaterTemprature(temp);
  settempratureScale('c');
};
// 修改handleFahrenheitChange
const handleFahrenheitChange = (value) => {
  setwaterTemprature(value);
  settempratureScale('f');
};

方案2：修改子组件的调用逻辑，传递事件对象 #

把子组件的handleTempratureChange改成直接传递事件对象即可：

const handleTempratureChange = (e) => {
  console.log(e.target.value);
  onTempratureChange(e); // 传整个事件对象，不要只传value
};

修正温度转换逻辑 #

把转换的调用关系改对，避免转换结果异常：

// 当当前单位是华氏时，要转成摄氏值，调用toCelsius
const celsius = tempratureScale === 'f' ? tryConvert(waterTemprature, toCelsius) : waterTemprature;
// 当当前单位是摄氏时，要转成华氏值，调用toFahrenheit
const fahrenheit = tempratureScale === 'c' ? tryConvert(waterTemprature, toFahrenheit) : waterTemprature;

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