3 回答

TA貢獻1772條經驗 獲得超8個贊
問題是我不知道為什么以及當我嘗試使用道具在其他組件中獲取 user.id 時,我的 tpyerror id 未定義。
原因是您嘗試在加載用戶之前獲取用戶的 id ,這意味著您正在執行類似null.id未定義的操作(取決于在useState沒有任何參數的情況下調用時返回的內容,可能為 null)
你得到多個未定義的原因console.log是:
第一次App渲染您的組件時,useEffect還沒有完成調用 api,所以user仍然如此undefined,第二次是因為您調用setLogged(true)了所以用戶仍然是undefined,第三次和第四次......我不確定,但你re 可能以某種方式改變狀態導致重新渲染
解決此問題的正確等待是等到useris defined(即 api 調用完成),您可以通過使用簡單的if語句來做到這一點,例如
if (user.id) {
// return components when the user is logged in
} else {
// return components where the user is not logged in, usually a "loading" screen
}
現在你說user.id退貨type error,但我在你的代碼中找不到任何user.id東西,所以我假設你沒有發布整個事情。

TA貢獻1818條經驗 獲得超11個贊
在您的第一次渲染中:您的用戶未定義這是正常的,因為您未在使用狀態中定義默認值,您可以通過 thisconst [user, setUser] = useState({})或 this更改代碼
import React, {useState, useEffect} from "react";
import NavBar from "./component/NavBar";
import Navigation from "./component/Navigation"
import Cookie from "js-cookie"
import axios from "axios"
import "./App.css";
function App() {
const [user, setUser] = useState()
const [logged, setLogged] = useState(false)
const cookie = Cookie.get("login")
useEffect(() => {
axios.post('/getdatafromcookie', cookie)
.then((res) => {
if(res.data.success === true){
setLogged(true)
setUser(res.data.user)
}
})
}, [])
console.log(user)
return (
<div className="App">
<header className="NavHeader">
{user ? <NavBar user={user} logged={logged} /> : "loading"}
</header>
{user ? <Navigation user={user} logged={logged}: "loading" />
</div>
);
}
export default App;

TA貢獻1811條經驗 獲得超5個贊
發生這種情況是因為 useEffect 在第一次渲染后執行,因此,第一次 user 為 null 時,您需要保護代碼以在用戶內部有數據后進行渲染
return user ? <div className=“app”><NavBar user={user}/></div> : <div>loading</div>)
日志被打印這么多次是因為開發中的嚴格模式
添加回答
舉報