相关疑难解决方法(0)

我有一个计数器和一个console.log()来useEffect记录我状态中的每个变化，但是useEffect在挂载时被调用两次。我正在使用 React 18。这是我项目的CodeSandbox和以下代码：

import  { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(5);

  useEffect(() => {
    console.log("rendered", count);
  }, [count]);

  return (
    <div>
      <h1> Counter </h1>
      <div> {count} </div>
      <button onClick={() => setCount(count + 1)}> click to increase </button>
    </div>
  );
};

export default Counter;

在 Next-JS 中，UseEffect() 运行两次。我听说你需要将一个空数组作为第二个参数来修复 React 中的这个问题。就我而言，在 Next-JS 中，这不起作用。（据我所知，Next-JS是基于React的）。

我找到了一种方法：在 next.config.js 中设置reactStrictMode: false。它有效，UserEffect 被调用一次。

但这种方法不适合我，因为。我需要使用 React 的严格模式。

_app.js：

import '../styles/globals.css';
import React, { useEffect, useState, useRef } from 'react';

function MyApp({ Component, pageProps }) {
  if (typeof window !== "undefined") {
    useEffect(() => {

      console.log('Component Did Mount') //called twice :c

    }, [])


  return <Component {...pageProps} />
}


export default MyApp

我有一个简单的 useEffect 函数设置，带有括号，如下所示：

  useEffect(() => {
    console.log('hello')
    getTransactions()
  }, [])

但是，当我运行我的应用程序时，它会在控制台中打印两个hello。知道为什么吗？

即使我添加这样的内容，仍然会打印两个hello。

  const [useEffectCalled, setUseEffectCalled] = useState<Boolean>(false)

  useEffect(() => {
    console.log('hello')
    if (!useEffectCalled) {
      getTransactions()
    }
    setUseEffectCalled(true)
  }, [])

我创建了一个全新的反应应用程序来自己测试这个，因为我的一个朋友面临这个问题。App.js 代码 ->

function App() {

  useEffect(() => {
    console.log('on init gets called');
  }, []);

  return (
    <>
      Hello my first react app      
    </>
  );
}

export default App;

应用程序中不存在其他组件。以下是index.js代码->

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

当我们第一次加载应用程序时，useEffect 中存在的 console.log 会打印两次。我希望它只打印一次。

所以，我用 create-react-app 开始了这个新项目（它运行的是 react v.16.13.1）。我把基础App组件改写成一个类，发现当组件是函数的时候，像这样：

function App() {
  console.log('App (function)');
  return 'App (function)';
}

浏览器控制台打印出来

App (function)

万分感谢！但是如果同一个 App 组件写成

class App extends React.Component {
  render() {
    console.log('App (class)');
    return 'App (class)';
  }
}

控制台写入

App (class)
App (class)

我正在从返回随机笑话的 api 中获取（使用 Nextjs 13 的fetchwith ）。{cache:'force-cache'}我注意到fetch在构建过程中被调用了两次。

这是我的代码：

// page.js
import {RefreshButton} from './RefreshButton'

async function getRandomJoke(){
  const res = await fetch("https://v2.jokeapi.dev/joke/Programming?type=single", {cache:'force-cache'})
  const data = await res.json()
  console.log("fetch called. Joke is: ", data['joke'])

  return data['joke']
}

export default async function Home() {
  const joke = await getRandomJoke()

  return (
    <div>
      {joke}
      <RefreshButton/>
    </div>
  )
}

这是构建日志：

[=   ] info  - Generating static pages (2/3)fetch called. Joke is:  A programmer puts two glasses on …

我一直在尝试连接 Web 应用程序的前端和后端，但遇到一个问题，当用户创建帐户时，会在数据库中创建该用户的多个对象。我使用console.log后发现我的 NextJS 代码是重复的。我发现这个稍微相关的帖子：组件函数运行多次反应 但是，它处理异步调用的问题，我已经通过空/未定义检查解决了这些问题。这是我当前的用户注册代码：

const handleUser = async (user) => {
  var bUserExists = false

  await axios.get(GET_USER(user.email))
    .then(response => {
      bUserExists = true;
    })
    .catch(err => {
      bUserExists = false
    })

  if(!bUserExists) {
    bUserExists = true;
    await axios.post(CREATE_USER(), {
      email: user.email,
      name: user.name,
    }).then(newUser => {
      console.log(newUser.data)
      if(newUser.data) {
        router.push('/form/p1')
      }
    }).catch(err => {
      console.log(err)
    })
  }
}

const { user, error, isLoading } = useUser();
  
if(isLoading) return <div>Loading...</div>;
if(error) return <div>{error.message}</div>;
if(user) {
  // …

我有一个名为 (First) 的功能组件

function First() {
    const [count,setCount]=useState(0)

    console.log("component first rendering") // this logging is happening twice


    return (
        <div>
            first component
        </div>
    )
}

当我最初运行应用程序时，console语句记录了两次，为什么它应该只记录一次，因为我没有明确更新状态。

我创建了一个反应项目并添加了构造函数和渲染方法，在运行它时我期望构造函数和渲染只运行一次，但两者都运行了两次。第一个构造函数运行两次，然后渲染。有人可以帮忙吗，我的其他生命周期方法也是如此。

import React, {Component} from 'react';
class App extends Component {
  constructor(props) {
    super(props)
    console.log('Constructor')
  }

  render() {
    console.log('render')
    return (
      <h1>My Favorite Color is </h1>
    );
  }
}
export default App;

这是我的 index.js .. 它是如何被调用的

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

我对 useEffect 是如何触发的以及它是如何工作的感到有点困惑。我写了一个这样的函数，但 useEffect 根本不运行。我想从API获取数据，然后根据数据渲染页面。但它不会触发 useEffect。如果我不使用 useEffect，它将渲染页面三次。

async function getData() {
  var tmpArrData = [];
  await fetch("this API is hidden due to the privacy of the company - sorry")
    .then((res) => res.json())
    .then((data) => {
      console.log("data", data);
      tmpArrData = data;
  });
  console.log("tmpData ", tmpArrData);
  return tmpArrData;
}

function App() {

  const [arrData, setArrData] = useState();
  const [loadData, setLoadData] = useState(false);

  useEffect(() => {
    console.log("if it works, this line should be shown");
    const tmpArrData = getData();
    setArrData(tmpArrData);
  }, [arrData]);


  const data …

我有一个非常基本的 api，它所做的就是返回文本“Sunny day”。

我使用 create React app 创建一个 React 项目，并尝试调用 api 一次，然后将结果打印到控制台。

这是反应应用程序

import logo from './logo.svg';
import './App.css';

function App() {

  fetch('https://localhost:44386/weatherforecast')
  .then(response => response.text())
  .then(data => console.log(data));

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

问题是 api 在页面加载时被调用两次

有人能解释一下为什么吗？

我已经在组件的渲染中放置了调试器，并且看到它有时会运行两次，如果不是大部分时间的话。是不是因为第一次渲染是在组件收到任何道具之前？第二次是什么时候收到？我认为组件经历了安装，接收道具，然后渲染的生活方式？还是安装、渲染、检查道具，然后重新渲染？

我Console.log('Dynamic page')在 NextJs 中添加了一个动态页面，但我意识到它记录了两次而不是一次。我将日志函数移至具有空数组依赖项的 useEffect 中，但它仍然记录了两次。这里可能有什么问题？谢谢

代码/topics/[articleId].js：

import { useRouter } from 'next/router'
import { useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import ExcitedSVG from '../../../components/reaction-icons/excited'
import HappySVG from '../../../components/reaction-icons/happy'
import InLoveSVG from '../../../components/reaction-icons/in-love'
import NotSureSVG from '../../../components/reaction-icons/not-sure'
import SillySVG from '../../../components/reaction-icons/silly'
import ArticleStyles from "../../../components/styles/article.module.css"

export default function Article(){

    useEffect(()=>{
        console.log('Log once'); <--- //It logs twice instead
    },[])

    return (
        <div className={`${ArticleStyles.articlePg} pt-5`}>
            Component content            
        </div>
    )
}