TypeError：无法读取未定义的属性（读取“用户名”）：React js

Question

I need to render username userData[0].userName it displays for the first time but if I reload it doesn't render user name.

const AppHeaderDropdown = () => {
  const [userData, setUserData] = useState({})
  const getUserData = async () => {
    debugger
    try {
      const res = await fetch('http://localhost:4000/api/authenticate', {
        method: 'GET',
        headers: {
          Accept: 'application/json',
        },
        credentials: 'include',
      })
      console.log(res)
      const data = await res.json()
      console.log('.........here i m in header dropdown...........')
      console.log(data[0].userName)
      setUserData(data)
      if (!res.status === 200) {
        const error = new Error(res.error)
        throw error
      }
    } catch (err) {
      console.log(err)
    }
  }
  useEffect(() => {
    getUserData()
  }, [])

TypeError : Cannot read properties of undefined (reading 'userName')

<CDropdownMenu className="pt-0" placement="bottom-end">
  61 |   <CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader>
  62 |   <CDropdownItem href="#">
> 63 |     <CIcon icon={cilUser} className="me-2" />
     | ^  64 |     {userData[0].userName}
  65 |   </CDropdownItem>
  66 |   <CDropdownItem href="#">

Answer 1

There are two problems:

1. The main problem is that your initial userData is {} . An empty object has no 0 property, so userData[0] is undefined on the first render. Remember that your initial state is rendered before any effects are run.
2. You're using userData as though it were an array, but your initial state is an empty non-array object. It should probably be const [userData, setUserData] = useState([]) (with a [] , an empty array), not const [userData, setUserData] = useState({}) .