Javascript 如何在将父级中的获取调用的数据传递给子组件之前停止子组件的加载

我正在制作一个显示应用程序及其评论的网站。每个应用程序都有一个页面，每个页面都包含应用程序的评论。如果评论是每个应用程序API调用中返回的数据的一部分，那么这将非常简单，但是评论是它们自己的对象，并且具有它们自己的调用。因此，基本上我希望应用程序的页面加载评论。问题是我一直在出错，因为我的子组件出于某种原因渲染了两次，第一次在没有审阅的情况下渲染。由于我不理解的原因，它也在父组件之前加载。我已经通过在每一步将道具打印到控制台来确认这一点。数据呈现的顺序是：从子组件打印的道具（不包括审阅，因此当我尝试提取任何数据时会出现未定义的错误）、从子组件打印的道具（包括审阅），然后最后打印来自异步组件didmount（）的数据。我使用的是异步componentDidMount（），因为我的印象是，将

放入componentDidMount（）中等待。fetchData（）

将导致它等待，直到获取数据。事实并非如此。所以，是的，如果有人能告诉我如何正确加载一次，那就太好了。我一直在尝试各种不同的东西，所以如果有些东西没有意义或不合情合理，那可能是以前尝试过的，我会在编辑中澄清

这是家长的代码

import React from 'react';
import Header from '../universal components/Header';
import DetailsAppHeader from '../details page components/DetailsAppHeader';
import FeatsComponents from '../details page components/FeatsComponents';
import SupportComponent from '../details page components/SupportComponent';
import ReviewsComponent from '../details page components/ReviewsComponent';

export default class DetailPageComponent extends React.Component {
    constructor(props){
        super(props);
        
        this.state = {
            // a bunch of stuff relating to the apps
        }

    async componentDidMount() {
        await this.fetchData()
       // this await is basically useless but it's the last thing I tried 
    }

    fetchData(){
        fetch("http://localhost:3001/reviewsForApp/" + this.state.appId)
        .then(response => response.json())
        .then(response => {
            this.setState({reviews: response.data.list})
        })
    }

    render(){
        return(
            <div>
                <div>
                    <div class="col-10 offset-1">
                        <Header />
                        <DetailsAppHeader appDetails={this.state} />
                        <FeatsComponents appDetails={this.state} />
                        <SupportComponent appDetails={this.state} />
                        <ReviewsComponent appDetails={this.state}/>
                    </div>
                </div>
            </div>
        )
    }
}

从“React”导入React；
从“../universal components/Header”导入标题；
从“../details page components/DetailsAppHeader”导入DetailsAppHeader；
从“../details页组件/FeatsComponents”导入FeatsComponents；
从“../details页组件/SupportComponent”导入SupportComponent；
从“../details页组件/ReviewComponent”导入ReviewComponent；
导出默认类DetailPageComponent扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
//一堆与应用程序相关的东西
}
异步组件didmount（）{
等待此消息。fetchData（）
//这种等待基本上是无用的，但这是我最后一次尝试
}
fetchData（）{
取回（“http://localhost:3001/reviewsForApp/“+this.state.appId）
.then（response=>response.json（））
。然后（响应=>{
this.setState（{reviews:response.data.list}）
})
}
render（）{
返回(
)
}
}

那孩子呢

import React from 'react';


const ReviewsComponent = (props) => (
     <div>
          {props.appDetails.reviews && <h3>Most Recent Reviews</h3>}
          {console.log(props.appDetails.reviews)}
          // first time returns undefined the second time it returns the correct data
          <p>{props.appDetails.reviews}</p>
          // this fails because the data is not loaded yet
     </div>
   )


export default ReviewsComponent;

从“React”导入React；
const ReviewsComponent=（道具）=>(
{props.appDetails.reviews&&最近的评论}
{console.log（props.appDetails.reviews）}
//第一次返回未定义的数据，第二次返回正确的数据
{props.appDetails.reviews}

//此操作失败，因为数据尚未加载
)
导出默认的ReviewComponent；

在填充状态时，可能只尝试渲染子组件，例如：

render（）{return(
{this.state&&(
) }
) }

这使得数据只被调用一次。不幸的是，第一次在ReviewComponent.js中加载数据时，数据没有被加载审查。你知道怎么做吗？这样我可以A）从第二次渲染调用中获取数据？或者B）在一次尝试中渲染审查？我猜你这么说是因为状态中填充了其他文件数据。用这个.state.reviews检查怎么样？我看到您在子组件ReviewComponent中添加了空检查逻辑。包括{p>{props.appDetails.review}

在{props.appDetails.reviews&&Most Recent reviews}.{props.appDetails.reviews？Most Recent reviews{props.appDetails.reviews}

:null}不，我是说，因为在添加评论之前，子组件调用了状态，这会导致错误。您知道如何获取状态，以便首先调用父组件中的fetch调用，然后将其传递给子组件吗？