ReactJS TypeError：无法读取未定义的属性（读取“地图”）

Posted 2023-03-29

【中文标题】ReactJS TypeError：无法读取未定义的属性（读取“地图”）

【英文标题】：ReactJS TypeError: Cannot read properties of undefined (reading 'map')

【发布时间】：2021-11-17 18:43:36

【问题描述】：

我目前正在使用两个组件，并在两个组件上都实现了 react Route。但是当我单击父组件 ViewAll.js 时，我无法从我的模拟 json 服务器 api 中获取值，并且此错误显示：

TypeError：无法读取未定义的属性（读取“地图”） 查看全部

但我可以看到来自 json 服务器的值显示在子组件上，即 InputForm.js

这是我的代码 sn-p：

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;

ViewAll.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;

【问题讨论】：

data 是不是这里的 typeof 数组 => console.log(data); ?

您可以将 Object.keys 与地图一起使用

Object.keys(inputs).map 将循环键

@trysetyoutomo 我试过了，但它现在说 TypeError: Cannot convert undefined or null to object

@SinanYaman 我在找对象

【参考方案1】：

如果你要映射一个对象：

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 && ... 只会渲染后者，如果输入不是 falsy

【讨论】：

现在，我明白了。这是错误提示要求我输入的关键，因为它是一个对象。

我可以在组件本身上输出包装在 div 中的返回对象吗？

你说的在组件本身是什么意思？

在您给定的代码 sn-p 中，该对象仅显示给子组件。如何在 ViewAll.js 上显示相同的对象？因为我使用的是反应路由器

目前显示在ViewAll.js?