我的 React 应用程序代码不断给出错误“无法读取未定义的属性 'fname'”，我不明白为啥

Posted 2023-02-21

【中文标题】我的 React 应用程序代码不断给出错误“无法读取未定义的属性 \'fname\'”，我不明白为啥

【英文标题】：My React app code keeps giving an error "Cannot read property 'fname' of undefined" and I don't understand why我的 React 应用程序代码不断给出错误“无法读取未定义的属性 'fname'”，我不明白为什么

【发布时间】：2020-09-30 22:14:54

【问题描述】：

import React,  useState  from "react";

function App() 
  const [fullName, setFullname] = useState(
    fname: " ",
    lname: " "
  );

  function handleChange(event) 
    const  value, name  = event.target;
    setFullname(prevValue => 
      if (name === "fname") 
        return 
          fname: value,
          lname: prevValue.lname
        ;
       else if (name === "lname") 
        return 
          fname: prevValue.fname,
          lname: value
        ;
      
    );
  

  return (
    <div className="container">
      <h1>
        Hello fullName.fname fullName.lname
      </h1>
      <form>
        <input
          onChange=handleChange
          name="fName"
          value=fullName.fname
          placeholder="First Name"
        />
        <input
          onChange=handleChange
          name="lName"
          placeholder="Last Name"
          value=fullName.lname
        />
        <button>Submit</button>
      </form>
    </div>
  );


export default App;

我是 React 的初学者，刚开始使用钩子。 上面的代码呈现了一个表单，该表单应该将名字和姓氏分别作为输入，并在标题中实时更新。但是当我输入一些东西时它会抛出错误：“× ←→1 of 7 errors on the page TypeError Cannot read property 'fname' of undefined”

错误在标签变量中突出显示。

【参考方案1】：

确保名称 attr 与对象内部的属性相同。

您的setFullname 也可以简化

const [fName, lLame, setFullname] = useState(
    fName: " ",
    lLame: " "
  );

function handleChange(target: name, value) 
    setFullname(state => (...state, [name]: value));

 <input
          onChange=handleChange
          name="fName"
          value=fFame
          placeholder="First Name"
        />
        <input
          onChange=handleChange
          name="lName"
          placeholder="Last Name"
          value=lName
        />

【讨论】：

谢谢你我想通了。

【参考方案2】：

handleChange 中的 if 条件失败。应该是

...
 setFullname(prevValue => 
      if (name === "fName") 
        return 
         ....
   else if (name === "lName") 
    return 
   ....

【讨论】：

对不起，和我写的不一样吗？

正如@Józef 指出的那样-“确保名称 attr 与对象内的属性相同。”所以，fname 应该是 fName 和 lname 应该是 lName。