I am new to reactJS and am writing code so that before the data is loaded from DB, it will show loading message, and then after it is loaded, render components with the loaded data. To do this, I am using both useState hook and useEffect hook. Here is the code:

问题是,当我检查console.log时,useEffect被触发了两次。因此,代码将两次查询相同的数据,这是应该避免的。

下面是我写的代码:

import React from 'react';
import './App.css';
import {useState,useEffect} from 'react';
import Postspreview from '../components/Postspreview'

const indexarray=[]; //The array to which the fetched data will be pushed

function Home() {
   const [isLoading,setLoad]=useState(true);
   useEffect(()=>{
      /*
      Query logic to query from DB and push to indexarray
      */
          setLoad(false);  // To indicate that the loading is complete
    })
   },[]);
   if (isLoading===true){
       console.log("Loading");
       return <div>This is loading...</div>
   }
   else {
       console.log("Loaded!"); //This is actually logged twice.
       return (
          <div>
             <div className="posts_preview_columns">
             {indexarray.map(indexarray=>
             <Postspreview
                username={indexarray.username}
                idThumbnail={indexarray.profile_thumbnail}
                nickname={indexarray.nickname}
                postThumbnail={indexarray.photolink}
             />
             )}
            </div>
         </div>  
         );
    }
}

export default Home;

有人能帮助我理解为什么它被调用两次,以及如何正确地修复代码吗? 非常感谢!


当前回答

如果有人使用NextJS 13来这里,为了删除严格模式,你需要在next.config.js文件中添加以下内容:

const nextConfig = {
  reactStrictMode: false
}
module.exports = nextConfig

当我创建项目时,它默认使用“严格模式”,这就是为什么我必须显式设置它。

其他回答

我使用这个作为我的替代useFocusEffect。我使用嵌套的react导航堆栈,如选项卡和抽屉,使用useEffect重构并不像预期的那样对我有效。

import React, { useEffect, useState } from 'react'
import { useFocusEffect } from '@react-navigation/native'

const app = () = {

  const [isloaded, setLoaded] = useState(false)


  useFocusEffect(() => {
      if (!isloaded) {
        console.log('This should called once')

        setLoaded(true)
      }
    return () => {}
  }, [])

}

还有一个例子,你在屏幕上导航了两次。

请检查你的index.js

  <React.StrictMode>
    <App />
  </React.StrictMode>

删除<React。StrictMode >包装 您现在应该发射一次

root.render(
    <App />
);

好吧,现在评论这个可能有点晚了-但我发现了一个相当有用的解决方案,即100%反应。

在我的情况下,我有一个令牌,我正在使用使一个POST请求注销我的当前用户。

我正在使用状态如下的减速机:

export const INITIAL_STATE = { 令牌:零 } export const logoutReducer = (state, action) => { Switch (action.type) { case ACTION_SET_TOKEN: 状态= { 状态, [action.name]: action.value }; 返回状态; 默认值: 抛出新的错误('无效的操作:${action} '); } } export const ACTION_SET_TOKEN = 0x1;

然后在我的组件中,我像这样检查状态:

import {useEffect, useReducer} from 'react'; import {INITIAL_STATE, ACTION_SET_TOKEN, logoutReducer} from "../reducers/logoutReducer"; const Logout = () => { const router = useRouter(); const [state, dispatch] = useReducer(logoutReducer, INITIAL_STATE); useEffect(() => { if (!state.token) { let token = 'x' // .... get your token here, i'm using some event to get my token dispatch( { type : ACTION_SET_TOKEN, name : 'token', value : token } ); } else { // make your POST request here } }

这个设计实际上很好——你有机会在POST请求之后从存储中丢弃你的令牌,确保POST在任何事情之前成功。对于异步的东西,你可以使用这样的形式:

POST()然后(异步。 () => {}). 抓住(异步 () => {}). 终于(异步)= > {})

所有运行在useEffect -工作100%,在我认为REACT开发人员的想法-这指出了我实际上有更多的清理工作要做(像从存储中删除我的令牌等),在一切正常之前,但现在我可以导航到和从我的注销页面没有任何奇怪的事情发生。

我的意见…

我在React 18中找到了一个非常好的解释。在React中调用UseEffect两次

注意:在生产中,它可以正常工作。在开发环境中的严格模式下,有意增加两次安装,以处理错误和所需的清理。

没什么好担心的。当你在开发模式下运行React时。它有时会运行两次。在刺激环境中测试它,您的useEffect将只运行一次。别担心! !