Javascript TypeError:无法读取属性'_id'；未定义的ReactJs的定义？

我正在尝试使用

.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>
  )
}

从“./SearchBox”导入{SearchBox}
从“/styles”导入{StyledNavBar、NavSection、StyledLink、StyledLogo}
从“./Logo2.png”导入徽标
从“react redux”导入{useDispatch}
从“react router”导入{useHistory}
从“axios”导入axios
从“react”导入{useffect，useState}
函数useApi（）{
const userId=localStorage.getItem（'userId'）
const dispatch=usedpatch（）
const[UserNames，setUserNames]=useState（）
useffect（（）=>{
异步函数getData（）{
试一试{
const{data}=await axios({
方法：“GET”，
baseURL:process.env.REACT\u APP\u SERVER\u URL，
url:“/用户”
})
console.log（数据）
调度（设置用户名（数据））
}捕获（错误）{
调度（控制台日志（错误））
}
}
getData（）
}, [])
返回{userId，UserNames}
}
export const NavBar=函数（{}）{
const{userId，UserNames}=useApi（）
console.log（用户名）
const token=localStorage.getItem（'token'）
const dispatch=usedpatch（）
const history=useHistory（）
函数handleClick（）{
分派（{type:'USER_LOGOUT'}）
localStorage.clear（）
history.push（“/”）
}
返回(
{！令牌&&Ingrear}
{！令牌和注册器}
分类
{token&&Mis Transacciones}
{令牌和供应商}
{！！UserNames&&UserNames.length>0&&UserNames.map（（usr，i）=>{
返回usr[i]。\u id==userId？
{usr[i].name}

:
''
})}
{token&&Cerrar Sesión}
)
}

因此，它几乎告诉我，

usr[i].\u id

行是不正确的，但就我所见，该代码没有任何错误。这就是我向你们伸出援手的原因，因为几只眼睛会比我仅有的两只好

---

PD：请容忍我，因为我是React.Js的新手，这是我的第一个应用。

我想你可能只是想要usr，而不是usr[I]？map（）提供iterable中的单个项