Невозможно прочитать свойство 'map' неопределенной ошибки в регистре. js - PullRequest
Новая
       19

Невозможно прочитать свойство 'map' неопределенной ошибки в регистре. js

0 голосов
/ 30 апреля 2020

, поэтому я следую учебному пособию по разработке приложения MERN с полным стеком, и я выполнил все шаги точно в соответствии с инструкциями (в основном). при отправке формы на странице регистрации, я получаю сообщение об ошибке: Не удается прочитать свойство 'map' из undefined. ниже код в реестре. js страница. 

import React, { useContext, useState, useEffect } from 'react'
import { Link } from 'react-router-dom';
import AuthContext from '../../context/authContext/authContext'

const Register = (props) => {
  const { register, isAuthencated, error, clearErrors, setError } = useContext(AuthContext)
  useEffect(() => {
    if (isAuthencated) {
      props.history.push('/')
    }
  }, [isAuthencated, props.history])

  const [user, setUser] = useState({
    name: '',
    email: '',
    password: '',
    password2: ''
  })
  const { name, email, password, password2 } = user
  onchange = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value })
    if (error !== null) {
      clearErrors()
    }
  }
  onsubmit = (e) => {
    e.preventDefault()
    if (password !== password2) {
      setError('Password does not match')
    } else {
      register({
        name,
        email,
        password
      })
    }
  }
  return (
    <div className="register">
      <h1>Sign Up</h1>
      <form >
        <input type="text" name="name" placeholder="Name" value={name} onChange={onchange} />
        <input type="email" name="email" placeholder="Email" value={email} onChange={onchange} />
        <input type="password" name="password" placeholder="Password" value={password} onChange={onchange} />
        <input type="password" name="password2" placeholder="Confirm Password" value={password2} onChange={onchange} required />
        <input type="submit" value="Sing Up" className="btn" />
      </form>
      <div className="question">
        {error !== null && error.map(err => <button className="danger" type="button"  >{err.msg} <span onClick={() => clearErrors()}>X</span></button>)}
        <p>Already have an accout? {" "} <Link to='/login'>Sign In </Link></p>
      </div>
    </div >
  )
}

export default Register

Ответы [ 3 ]

0 голосов
/ 03 мая 2020

прежде всего измените 

{error !== null && error.map(err => ....)}

на 

{error != null && error.map(err => ....)}

, чтобы также охватывалось неопределенное.

Также убедитесь, что объект error только инициализирован как массив []

0 голосов
/ 03 мая 2020

вы можете сделать, как {error && !!error.length && error.map((e) => {e})

, он проверяет наличие ошибки и длину ошибки больше 0 и выполняет отображение.

Но убедитесь, что error является массив.

0 голосов
/ 30 апреля 2020

Попробуйте следующую строку. Поскольку допустимая ошибка может не иметь тип массива 

{error !== null && !!error.length && error.map(err => <button className="danger" type="button"  >{err.msg} <span onClick={() => clearErrors()}>X</span></button>)}

или использовать другой метод: 

   {error !== null &&  Array.isArray(error) && error.map(err => <button className="danger" type="button"  >{err.msg} <span onClick={() => clearErrors()}>X</span></button>)}

объект ошибки должен быть массивом. в противном случае функция карты не будет работать

...