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;

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


当前回答

不知道为什么你不把结果放在状态,这里有一个例子,调用效果一次,所以你必须在代码中做了一些事情,没有发布,使它再次呈现:

const App = () => { const [isLoading, setLoad] = React.useState(true) const [data, setData] = React.useState([]) React.useEffect(() => { console.log('in effect') fetch('https://jsonplaceholder.typicode.com/todos') .then(result => result.json()) .then(data => { setLoad(false)//causes re render setData(data)//causes re render }) },[]) //first log in console, effect happens after render console.log('rendering:', data.length, isLoading) return <pre>{JSON.stringify(data, undefined, 2)}</pre> } //render app ReactDOM.render(<App />, document.getElementById('root')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>

为了防止额外的渲染,你可以在一个状态下合并数据和加载:

const useIsMounted = () => { const isMounted = React.useRef(false); React.useEffect(() => { isMounted.current = true; return () => isMounted.current = false; }, []); return isMounted; }; const App = () => { const [result, setResult] = React.useState({ loading: true, data: [] }) const isMounted = useIsMounted(); React.useEffect(() => { console.log('in effect') fetch('https://jsonplaceholder.typicode.com/todos') .then(result => result.json()) .then(data => { //before setting state in async function you should // alsways check if the component is still mounted or // react will spit out warnings isMounted.current && setResult({ loading: false, data }) }) },[isMounted]) console.log( 'rendering:', result.data.length, result.loading ) return ( <pre>{JSON.stringify(result.data, undefined, 2)}</pre> ) } //render app ReactDOM.render(<App />, document.getElementById('root')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>

其他回答

新的React文档(目前处于测试阶段)有一个章节精确地描述了这种行为:

如何处理效果发射两次在开发

从文档中可以看出:

通常,答案是实现清理功能。清除函数应该停止或撤消Effect正在做的任何事情。经验法则是,用户不应该能够区分Effect运行一次(如在生产中)和设置→清理→设置序列(如您在开发中看到的)。

所以这个警告应该让你仔细检查你的useEffect,通常意味着你需要实现一个清理函数。

删除<反应。从index.js的StrictMode> 这段代码将是

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

this

root.render(
    <App />
);

React StrictMode在开发服务器上渲染组件两次

下面是为您的目的定制的钩子。这对你的情况可能有帮助。

import {
  useRef,
  EffectCallback,
  DependencyList,
  useEffect
} from 'react';

/**
 * 
 * @param effect 
 * @param dependencies
 * @description Hook to prevent running the useEffect on the first render
 *  
 */
export default function useNoInitialEffect(
  effect: EffectCallback,
  dependancies?: DependencyList
) {
  //Preserving the true by default as initial render cycle
  const initialRender = useRef(true);

  useEffect(() => {
   
    let effectReturns: void | (() => void) = () => {};
    
    /**
     * Updating the ref to false on the first render, causing
     * subsequent render to execute the effect
     * 
     */
    if (initialRender.current) {
      initialRender.current = false;
    } else {
      effectReturns = effect();
    }

    /**
     * Preserving and allowing the Destructor returned by the effect
     * to execute on component unmount and perform cleanup if
     * required.
     * 
     */
    if (effectReturns && typeof effectReturns === 'function') {
      return effectReturns;
    } 
    return undefined;
  }, dependancies);
}

我使用这个作为我的替代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 () => {}
  }, [])

}

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

不知道为什么你不把结果放在状态,这里有一个例子,调用效果一次,所以你必须在代码中做了一些事情,没有发布,使它再次呈现:

const App = () => { const [isLoading, setLoad] = React.useState(true) const [data, setData] = React.useState([]) React.useEffect(() => { console.log('in effect') fetch('https://jsonplaceholder.typicode.com/todos') .then(result => result.json()) .then(data => { setLoad(false)//causes re render setData(data)//causes re render }) },[]) //first log in console, effect happens after render console.log('rendering:', data.length, isLoading) return <pre>{JSON.stringify(data, undefined, 2)}</pre> } //render app ReactDOM.render(<App />, document.getElementById('root')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>

为了防止额外的渲染,你可以在一个状态下合并数据和加载:

const useIsMounted = () => { const isMounted = React.useRef(false); React.useEffect(() => { isMounted.current = true; return () => isMounted.current = false; }, []); return isMounted; }; const App = () => { const [result, setResult] = React.useState({ loading: true, data: [] }) const isMounted = useIsMounted(); React.useEffect(() => { console.log('in effect') fetch('https://jsonplaceholder.typicode.com/todos') .then(result => result.json()) .then(data => { //before setting state in async function you should // alsways check if the component is still mounted or // react will spit out warnings isMounted.current && setResult({ loading: false, data }) }) },[isMounted]) console.log( 'rendering:', result.data.length, result.loading ) return ( <pre>{JSON.stringify(result.data, undefined, 2)}</pre> ) } //render app ReactDOM.render(<App />, document.getElementById('root')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>