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) {

  // 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东西，所以我假设你没有发布整个事情。

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

  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

发生这种情况是因为 useEffect 在第一次渲染后执行，因此，第一次 user 为 null 时，您需要保护代码以在用户内部有数据后进行渲染

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

日志被打印这么多次是因为开发中的严格模式