为什么 useEffect 是运行的两倍？

Question

我正在使用 axios 将数据从后端传递到前端，但它执行了两次并且第一次显示未定义但第二次一切正常。（我正在控制台记录它以检查值） .我的问题是为什么它执行两次。这是下面的前端部分，我的 axios 请求在 useEffect

里面

import React, { useState, useEffect } from 'react';
import './JournalPage.css';
import {useParams} from "react-router-dom";
import axios from "../axios.js";
import Logo from './Logo';
// import MenuBookIcon from '@mui/icons-material/MenuBook';
// import ViewWeekIcon from '@mui/icons-material/ViewWeek';
// import ListAltIcon from '@mui/icons-material/ListAlt';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import Navbar from './Navbar';
import Blog from './Blog';

function JournalPage() {

    let {username} = useParams();
    const [userData, setuserData] = useState("[]");

    useEffect(() =>{
        async function fetchData() {
            const req = await axios.post("/userdata",{username});

            setuserData(req.data);
        }

        fetchData();
    }, []);
    console.log(username);
    console.log(userData);
    // const monthNames = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
    // const dayNames = ["Sunday","Monday","Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    // const dateObj = new Date();
    // const month = monthNames[dateObj.getMonth()];
    // const day = String(dateObj.getDate()).padStart(2, '0');
    // const weekday = dayNames[dateObj.getDay()];
    // const year = dateObj.getFullYear();
    // const output = month  + '\n'+ day  + '\n' + year + ',' + weekday;
    return (
        <div className="journal">
            {/* <header className="header">
                <h1><span>ð</span>тᴄг<span></span></h1>
            </header> */}
            <header className="header">
                <Logo />
                {/* <h3>{output}</h3> */}
                <h3><AccountCircleIcon className="icon2" fontSize="large"/>{userData.name}</h3>
            </header>
            <div className="navcon">
                {/* <div className="navbardiv">
                    <ul>
                        <li><MenuBookIcon className="icon1"/>My Journal</li>
                        <li><ViewWeekIcon className="icon1"/>Week Planner</li>
                        <li><ListAltIcon className="icon1"/>Daily To Do's</li>
                    </ul>
                </div> */}
                <Navbar id={userData._id}/>
                <div className="content">
                    <Blog blog={userData.blog}/>
                </div>
            </div>
        </div>
    )
}

export default JournalPage

这是相同

的后端路由

app.post("/userdata", (req, res) =>{
    console.log(req.body);
    const id=req.body.username;
    User.findOne({_id: id}, function(err, foundUser){
        if(err){
            console.log(err)
        } else{
            console.log(foundUser);
            res.send(foundUser);
        }
    });
});

这就是我在控制台中得到的。第 4 行到第 7 行正在重复。我第一次没有得到任何回报，但第二次一切正常。 This is the console ss.

这是博客组件

import React from 'react';
import "./Blog.css";

function Blog({blog}) {
  console.log(blog);
  return <div className="blog">
      <h1>{blog[0]?.date}</h1>
      <p>{blog[0]?.post}</p>
  </div>;
}

export default Blog;

Answer 1

如果它是在您 console.log userData 时出现的，那么这是预期的行为，因为您将其记录在效果外部之外。这是因为在第一次渲染时，效果在组件的生命周期中最后被调用，因此该值将是未定义的。

你还应该更改：

const [userData, setuserData] = useState("[]");

至：

const [userData, setuserData] = useState([]);

否则你将无法在 JSX 中循环它。

为什么 useEffect 是运行的两倍？

Why useEffect is running two times?

html

javascript

reactjs

axios

use-effect

为什么 useEffect 是 运行 的两倍？

Why useEffect is running two times?

html

javascript

reactjs

axios

use-effect

为什么 useEffect 是运行的两倍？