TypeError: Cannot read property '_id' of undefined ReactJs?

Question

我正在尝试使用 .map() 方法根据用户 ID 获取用户名。我写的代码对我来说似乎不错，但是，我收到问题标题中提到的错误并且页面无法呈现。

见下图：

这是错误堆栈的图片：

这是我的代码：

import { SearchBox } from "../SearchBox"
import { StyledNavBar, NavSection, StyledLink, StyledLogo } from "./styles"
import logo from './Logo2.png'
import { useDispatch } from "react-redux"
import { useHistory } from "react-router"
import axios from "axios"
import { useEffect, useState } from "react"

function useApi() {
  const userId = localStorage.getItem('userId')
  const dispatch = useDispatch()
  const [UserNames, setUserNames] = useState()

  useEffect(() =>  {
    async function getData() {
      try {
        const { data } = await axios({
        method: 'GET',
        baseURL: process.env.REACT_APP_SERVER_URL,
        url: '/users'
        })
        console.log(data)
        dispatch(setUserNames(data))
      }catch(error){
        dispatch(console.log(error))
      }
    }
    
    getData()
    
  }, [])

  return { userId, UserNames }
}


export const NavBar = function({}) {
  const { userId, UserNames } = useApi()
  console.log(UserNames)
  const token = localStorage.getItem('token')
  const dispatch = useDispatch()
  const history = useHistory()

  function handleClick(){

    dispatch({type: 'USER_LOGOUT'})
    localStorage.clear()
    history.push('/')
  }

  return(
    <StyledNavBar>
      <NavSection>
        {!token && <StyledLink to='/login'>Ingresar</StyledLink>}
        {!token && <StyledLink to='/signup'>Registrarse</StyledLink>}
        <StyledLink to='/'>Categorías</StyledLink>
        <StyledLink to='/'><StyledLogo src={logo} /></StyledLink>
        {token && <StyledLink to='/'>Mis Transacciones</StyledLink>}
        {token && <StyledLink to='/sellproduct'>Vender</StyledLink>}
        {!!UserNames && UserNames.length > 0 && UserNames.map((usr, i) => {
          return usr[i]._id === userId ?
            <p>{usr[i].name}</p>
          :
            ''
        })}
        <SearchBox />
        {token && <button type='button' onClick={handleClick}>Cerrar Sesión</button>}
      </NavSection>
    </StyledNavBar>
  )
}

所以这几乎告诉我 usr[i]._id 行不正确，但据我所知，该代码没有任何问题。

Answer 1

我想你可能只想要 usr 而不是 usr[i]？ map() 为您提供 iterable 中的单个项目。

TypeError: Cannot read property '_id' of undefined ReactJs?

TypeError: Cannot read property '_id' of undefined ReactJs?

javascript

reactjs

iteration

rendering