我的 React 应用程序代码一直给出错误"Cannot read property 'fname' of undefined"我不明白为什么

Question

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

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

Answer 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}
/>

Answer 2

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

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