reactjs - ReactJS TypeError:无法读取未定义的属性(读取“地图”)
问题描述
我目前正在使用两个组件,并在两者上都实现了 react Route。但是当我单击父组件 ViewAll.js 时,我无法从我的模拟 json 服务器 api 中获取值,并且此错误显示:
TypeError:无法读取未定义的属性(读取“地图”)查看全部
但我可以看到来自 json 服务器的值显示在子组件上,即 InputForm.js
这是我的代码片段:
InputForm.js
import { useEffect, useState } from "react";
import ViewAll from "./ViewAll";
const InputForm = () => {
//First Name Validation
const [enteredFName, setEnteredFName] = useState("");
const [enteredFNameTouch, setEnteredFNameTouch] = useState(false);
const enteredFNameFilled = enteredFName.trim() !== "";
const enteredFNameNotFilled = !enteredFNameFilled && enteredFNameTouch;
const enteredFNameValid = /^[A-Za-z\s]+$/.test(enteredFName);
const enteredFNameInvalid = !enteredFNameValid && enteredFNameNotFilled;
const fNameChangeHandler = (event) => {
setEnteredFName(event.target.value);
};
const fNameBlurHandler = () => {
setEnteredFNameTouch(true);
};
//Last Name Validation
const [enteredLName, setEnteredLName] = useState("");
const [enteredLNameTouch, setEnteredLNameTouch] = useState(false);
const enteredLNameFilled = enteredLName.trim() !== "";
const enteredLNameNotFilled = !enteredFNameFilled && enteredLNameTouch;
const enteredLNameValid = /^[A-Za-z\s]+$/.test(enteredLName);
const enteredLNameInvalid = !enteredLNameValid && enteredLNameNotFilled;
const lNameChangeHandler = (event) => {
setEnteredLName(event.target.value);
};
const lNameBlurHandler = () => {
setEnteredLNameTouch(true);
};
//EmailValidation
const [enteredEmail, setEnteredEmail] = useState("");
const [enteredEmailTouch, setEnteredEmailTouch] = useState(false);
const enteredEmailFilled = enteredEmail.trim() !== "";
const enteredEmailNotFilled = !enteredEmailFilled && enteredEmailTouch;
const enteredEmailValid = enteredEmail.includes("@");
const enteredEmailInvalid = !enteredEmailValid && enteredEmailNotFilled;
const emailChangeHandler = (event) => {
setEnteredEmail(event.target.value);
};
const emailBlurHandler = () => {
setEnteredEmailTouch(true);
};
//EIDValidation
const [enteredEid, setEnteredEid] = useState("");
const [enteredEidTouch, setEnteredEidTouch] = useState(false);
const enteredEidFilled = enteredEid.trim() !== "";
const enteredEidNotFilled = !enteredEidFilled && enteredEidTouch;
const eidChangeHandler = (event) => {
setEnteredEid(event.target.value);
};
const eidBlurHandler = () => {
setEnteredEidTouch(true);
};
//Birthday Validation
const [enteredBirthday, setEnteredBirthday] = useState("");
const [enteredBirthdayTouch, setEnteredBirthdayTouch] = useState(false);
const enteredBirthdayFilled = enteredBirthday.trim() !== "";
const enteredBirthdayNotFilled =
!enteredBirthdayFilled && enteredBirthdayTouch;
const birthdayChangeHandler = (event) => {
setEnteredBirthday(event.target.value);
};
const birthdayBlurHandler = () => {
setEnteredBirthdayTouch(true);
};
const [inputData, setInputData] = useState([
{
fName: enteredFName,
lName: enteredLName,
email: enteredEmail,
eid: enteredEid,
birthday: enteredBirthday,
},
]);
let formValid = false;
if (
enteredFNameFilled &&
enteredLNameFilled &&
enteredEmailFilled &&
enteredEidFilled &&
enteredBirthdayFilled
) {
formValid = true;
}
const formSubmitHandler = (event) => {
event.preventDefault();
if (!enteredFNameValid || !enteredLNameValid) {
alert("First Name and Last Name accepts letters only.");
return;
}
setInputData({
fName: enteredFName,
lName: enteredLName,
email: enteredEmail,
eid: enteredEid,
birthday: enteredBirthday,
});
console.log(inputData);
console.log(
enteredFName,
enteredLName,
enteredEmail,
enteredEid,
enteredBirthday
);
setEnteredFName("");
setEnteredFNameTouch(false);
setEnteredLName("");
setEnteredLNameTouch(false);
setEnteredEmail("");
setEnteredEmailTouch(false);
setEnteredEid("");
setEnteredEidTouch(false);
setEnteredBirthday("");
setEnteredBirthdayTouch(false);
};
useEffect(() => {
fetch("http://localhost:3001/inputData")
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
setInputData(data);
});
}, []);
return (
<form onSubmit={formSubmitHandler}>
<div>
<h1>Please Enter your details below</h1>
</div>
<div className="control-group">
<div>
<label>First Name</label>
<input
type="text"
required
id="fName"
onChange={fNameChangeHandler}
onBlur={fNameBlurHandler}
value={enteredFName}
/>
{enteredFNameInvalid && <p>First Name is required.</p>}
</div>
<div>
<label>Last Name</label>
<input
type="text"
required
id="lName"
onChange={lNameChangeHandler}
onBlur={lNameBlurHandler}
value={enteredLName}
/>
{enteredLNameInvalid && <p>Last Name is required.</p>}
</div>
</div>
<div>
<label>Email</label>
<input
type="email"
required
id="email"
onChange={emailChangeHandler}
onBlur={emailBlurHandler}
value={enteredEmail}
/>
{enteredEmailInvalid && <p>Email is required.</p>}
</div>
<div>
<label>EID</label>
<input
type="number"
required
min="1"
step="1"
id="eid"
onChange={eidChangeHandler}
onBlur={eidBlurHandler}
value={enteredEid}
/>
{enteredEidNotFilled && <p>EID is required.</p>}
</div>
<div>
<label>Birthday</label>
<input
type="date"
required
id="birthday"
onChange={birthdayChangeHandler}
onBlur={birthdayBlurHandler}
value={enteredBirthday}
/>
{enteredBirthdayNotFilled && <p>Birthday is required.</p>}
</div>
<div>
<button
type="submit"
disabled={!formValid}
onClick={() => setInputData(inputData)}
>
Submit
</button>
<div>
</div>
<ViewAll inputs={inputData} />
</div>
</form>
);
};
export default InputForm;
查看全部.js
import React, { useEffect } from "react";
const ViewAll = (props) => {
const inputs = props.inputs;
return (<div>
{inputs.map((input) => (
<div key={input.id}>
<p>First Name: {input.fName}</p>
<p>Last Name: {input.lName}</p>
<p>Email: {input.email}</p>
<p>EID: {input.eid}</p>
<p>Birthday: {input.birthday}</p>
</div>
))}
</div>);
};
export default ViewAll;
解决方案
如果要映射对象:
import React, { useEffect } from "react";
const ViewAll = (props) => {
const {inputs} = props; //destructuring, not necessary but common
return (<div>
{inputs && Object.keys(inputs).map((inputKey) => (
<div key={inputKey}>
<p>First Name: {inputs[inputKey].fName}</p>
<p>Last Name: {inputs[inputKey].lName}</p>
<p>Email: {inputs[inputKey].email}</p>
<p>EID: {inputs[inputKey].eid}</p>
<p>Birthday: {inputs[inputKey].birthday}</p>
</div>
))}
</div>);
};
export default ViewAll;
请注意inputs && ...
,如果输入不是虚假的,则只会呈现后者
推荐阅读
- android - 如何将动画 GIF 转换为 AVD
- rust - 如何使用运行 Gnome xOrg 的 Debian 为 Nannou 调试 NoAvailableAdapter?
- go - 处理“长期互斥”类型的问题?
- r - 如何有效地将 cumprod 应用于 tidyverse 中的所有列
- html - 如何使用相对定位的子图像调整图像的大小?
- javascript - eventTarget.click() 和 eventTarget.dispatchEvent(new Event("click")) 有什么区别?
- java - Ubuntu 18.04.05 上的 Ambari 2.7.5 安装失败
- c++ - 反转单链表的特定部分,即从 m 到 n
- javascript - 在nodejs中的同一连接内运行查询
- python - Pyspark:在列和索引上排名()?