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

Question

我需要渲染用户名userData[0].userName它第一次显示，但如果我重新加载它不会渲染用户名。

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 ：无法读取未定义的属性（读取“用户名”）

<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

有两个问题：

1. 主要问题是您的初始userData是{} 。 空的 object 没有0属性，因此在第一次渲染时undefined userData[0] 。 请记住，您的初始 state 是在运行任何效果之前渲染的。
2. 您使用userData就好像它是一个数组，但您的初始 state 是一个空的非数组 object。 它可能应该是const [userData, setUserData] = useState([]) （带有[] ，一个空数组），而不是const [userData, setUserData] = useState({}) 。