Javascript React使用useffect异步加载数据

我有一个父组件，其中包含一个子组件，该子组件异步加载数据。目前我有：

<Parent> 
  <AsyncChild data={props.data} />
  <Child />
</Parent>

---

我要做的是加载

，当

异步处理数据时，在

组件上方显示一个加载程序。但是，当前加载程序不显示，并且两个子组件同时显示。如何正确执行此操作？

您可以将状态添加到父组件中，如下所示：

import { useState } from 'react';


export default function App () {
 
 [isLoading, setLoading] = useState(false);

 return (
  <Parent> 
   <AsyncChild data={props.data} setLoading={setLoading}/>
   {isLoading && <Loader />}
   <Child />
  </Parent>
 )
}

---

可以将状态添加到父组件中，如下所示：

import { useState } from 'react';


export default function App () {
 
 [isLoading, setLoading] = useState(false);

 return (
  <Parent> 
   <AsyncChild data={props.data} setLoading={setLoading}/>
   {isLoading && <Loader />}
   <Child />
  </Parent>
 )
}

---

在这方面，我相信在加载

时不会显示

组件。我希望孩子在

运行时能够完全显示出来loading@ashes999我已经更改了代码，现在将显示

子组件

组件，只有加载将在falsesetLoading（false）时消失；应添加到useEffect中的返回函数中@Girgetto好的，我明白了，我不再需要在我的子组件中添加任何加载，对吗？@ashes999这取决于，你可以在父组件或子组件中进行加载，如果您喜欢在子组件中使用它，您只需将状态移到itOn，我相信在加载时不会显示

组件。我希望孩子在

运行时能够完全显示出来loading@ashes999我已经更改了代码，现在将显示

子组件

组件，只有加载将在falsesetLoading（false）时消失；应添加到useEffect中的返回函数中@Girgetto好的，我明白了，我不再需要在我的子组件中添加任何加载，对吗？@ashes999这取决于，你可以在父组件或子组件中进行加载，如果你喜欢在子组件中进行加载，只需将状态移到其中即可

useEffect(() => {
    setLoading(true); // <----- START LOADING
    let mounted = true;
    processDataAsynchronously(data);
    .then(data => {
        if(mounted) {
            setMyData(data);
            setDataLoaded(true);
        }
        setLoading(false); // <----- END LOADING
    });  
    return () => {
        mounted = false;
    }   
   }, [data])