React 多渲染功能組件

Question

我開始反應，我嘗試使用我的 cookie 從我的 api 獲取用戶數據，我有數據，但是當我 console.log() 用戶數據時，我有 4 個未定義的用戶數據，然后是 2 個相同的 object 數據。 問題是我不知道為什么以及當我嘗試使用道具在其他組件中獲取 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;

控制台日志顯示：

• 不明確的
• 不明確的
• 不明確的
• 不明確的
• {id：“31”，email：“test@test.fr”等.....}
• {id：“31”，email：“test@test.fr”等.....}

導航欄

import React, { useState, useEffect } from "react";
import RegisterForm from "../component/RegisterForm";
import RegisterLogin from "../component/RegisterLogin";
import { Navbar, Nav, Dropdown } from "react-bootstrap";
import { Button } from "@material-ui/core"

export default function NavBar(props) {
    const [modalLoginShow, setModalLoginShow] = useState();
    const [modalRegisterShow, setModalRegisterShow] = useState();
    const user = props.user
    const islogged = props.logged
    

   if(islogged === false)
    {
        return (
            <Navbar collapseOnSelect expand="lg" bg="transparent" variant="light">
                <Navbar.Brand href="/">Matchandate</Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="mr-auto"></Nav>
                    <Nav>
                        <Nav.Link onClick={() => setModalLoginShow(true)}>
                            <Button variant="contained" color="secondary">Login</Button>
                        </Nav.Link>
                        <Nav.Link onClick={() => setModalRegisterShow(true)}>
                            <Button variant="contained" color="secondary" >Register</Button>
                        </Nav.Link>
                    </Nav>
                </Navbar.Collapse>
                <RegisterLogin show={modalLoginShow} onHide={() => setModalLoginShow(false)} />
                <RegisterForm show={modalRegisterShow} onHide={() => setModalRegisterShow(false)} />
            </Navbar>
        )
    }
    return(
        <Navbar collapseOnSelect expand="lg" bg="transparent" variant="light">
                <Navbar.Brand href="/">Matchandate</Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="mr-auto"></Nav>
                    <Nav>
                        <Nav.Link href="/profile">
                            <Button variant="contained" color="primary">Profile</Button>
                        </Nav.Link>
                        <Nav.Link href="/logout">
                            <Button variant="contained" color="primary" >Logout</Button>
                        </Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
    )
}

導航

import React from "react"
import Slider from "./SliderHome";
import Activate from "./Activate";
import ForgotPwd from "./Pages/ForgotPwd"
import ChangePwd from "./Pages/ChangePwd"
import UserProfile from "./Pages/UserProfil";
import ErrorPage from "./Pages/ErrorPage"
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";


export default function Navigation(props){
  const user = props.user
  const islogged = props.logged
  
  if(islogged){
    return(
      <Router>
      <Switch>
        <Route exact path="/" exact component={Slider} />
        <Route exact path="/profile" component={() => <UserProfile user={user} />} />
        {/* <Route path="/user/:id" component={ChangePwd}/> */}
        <Route path="/" component={ErrorPage} />
      </Switch>
  </Router>
    )
  }
  return (
    <Router>
      <Switch>
        <Route exact path="/" exact component={Slider} />
        <Route path="/activate"  component={Activate} />
        <Route path="/forgot-pwd" component={ForgotPwd}/>
        <Route path="/changepwd" component={ChangePwd}/>
        {/* <Route path="/user/:id" component={ChangePwd}/> */}
        <Route path="/" component={ErrorPage} />
      </Switch>
  </Router>
  )
}

Answer 1

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

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

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

Answer 2

在你的第一次渲染中：你的用戶是未定義的，這是正常的，因為你沒有在你的 usestate 中定義一個默認值你可以通過這個const [user, setUser] = useState({})或者這個來改變你的代碼

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;

Answer 3

問題是我不知道為什么以及當我嘗試使用道具在其他組件中獲取 user.id 時，我的 tpyerror id 未定義。

原因是您嘗試在加載用戶之前獲取用戶的 id，這意味着您正在執行類似null.id類的未定義的操作（取決於在沒有任何 arguments 的情況下調用時useState返回的內容，可能為空）

您在console.log中獲得多個 Undefined 的原因是：

第一次渲染App組件時， useEffect還沒有完成調用 api ，所以user仍然是undefined ，第二次是因為你調用setLogged(true)所以 user 仍然是undefined ，第三次和第四次......我不確定，但您可能正在以某種方式更改 state 導致重新渲染

解決此問題的正確等待是等到defined user （即 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 ，所以我假設您沒有發布整個內容。