亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React 多渲染功能組件

React 多渲染功能組件

慕村9548890 2022-11-11 13:07:15
我開始反應,我嘗試使用我的 cookie 從我的 api 獲取用戶數據,我有數據,但是當我 console.log() 用戶數據時,我有 4 個未定義的用戶數據,然后是 2 個相同的對象數據。問題是我不知道為什么以及當我嘗試使用道具在其他組件中獲取 user.id 時,我的 tpyerror id 未定義。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">            <NavBar user={user} logged={logged} />        </header>        <Navigation user={user} logged={logged}/>    </div> );}export default App;
查看完整描述

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東西,所以我假設你沒有發布整個事情。


查看完整回答
反對 回復 2022-11-11
?
慕尼黑8549860

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;


查看完整回答
反對 回復 2022-11-11
?
四季花海

TA貢獻1811條經驗 獲得超5個贊

發生這種情況是因為 useEffect 在第一次渲染后執行,因此,第一次 user 為 null 時,您需要保護代碼以在用戶內部有數據后進行渲染

return user ? <div className=“app”><NavBar user={user}/></div> : <div>loading</div>)

日志被打印這么多次是因為開發中的嚴格模式


查看完整回答
反對 回復 2022-11-11
  • 3 回答
  • 0 關注
  • 185 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號