React 多渲染功能组件

Question

我开始反应，我尝试使用我的 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;

Answer 1

问题是我不知道为什么以及当我尝试使用道具在其他组件中获取 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) {&nbsp; // return components when the user is logged in} else {&nbsp; // return components where the user is not logged in, usually a "loading" screen}现在你说user.id退货type error，但我在你的代码中找不到任何user.id东西，所以我假设你没有发布整个事情。

Answer 2

在您的第一次渲染中：您的用户未定义这是正常的，因为您未在使用状态中定义默认值，您可以通过 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() {&nbsp; const [user, setUser] = useState()&nbsp; const [logged, setLogged] = useState(false)&nbsp; const cookie = Cookie.get("login")&nbsp; useEffect(() => {&nbsp; &nbsp; &nbsp;axios.post('/getdatafromcookie', cookie)&nbsp; &nbsp; .then((res) => {&nbsp; &nbsp; &nbsp; &nbsp; if(res.data.success === true){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setLogged(true)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setUser(res.data.user)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })}, [])console.log(user)return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; <header className="NavHeader">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {user ? <NavBar user={user} logged={logged} /> : "loading"}&nbsp; &nbsp; &nbsp; &nbsp; </header>&nbsp; &nbsp; &nbsp; &nbsp; {user ? <Navigation user={user} logged={logged}: "loading" />&nbsp; &nbsp; </div>&nbsp;);}export default App;

Answer 3

发生这种情况是因为 useEffect 在第一次渲染后执行，因此，第一次 user 为 null 时，您需要保护代码以在用户内部有数据后进行渲染return&nbsp;user&nbsp;?&nbsp;<div&nbsp;className=“app”><NavBar&nbsp;user={user}/></div>&nbsp;:&nbsp;<div>loading</div>)日志被打印这么多次是因为开发中的严格模式