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({}) 。