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;

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


当前回答

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

其他回答

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

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.StrictMode时ReactJS的特性。StrictMode为它的后代节点激活额外的检查和警告。因为应用程序不应该崩溃的情况下,任何不良的做法在代码。我们可以说StrictMode是一个安全检查,用于两次验证组件以检测错误。

你会得到这个<React。组件根的StricyMode>。

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

如果你想限制组件渲染两次,你可以删除<React。StrictMode>并检查它。但是在糟糕的代码实践中,使用StrictMode来检测运行时错误是必要的。

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

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

请检查你的index.js

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

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

root.render(
    <App />
);

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

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

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