我正在创建一个显示应用程序及其评论的网站。每个应用程序都有一个页面，每个页面都包含应用程序的评论。如果评论是每个应用程序 API 调用中返回的数据的一部分，那将非常容易，但评论是它们自己的对象，有自己的调用。所以基本上我希望应用程序的页面加载评论。问题是我不断收到错误，因为我的子组件由于某种原因渲染了两次，第一次渲染时没有评论。由于某种我无法理解的原因，它也在父组件之前加载。我已通过在每个步骤中将道具打印到控制台来确认这一点。数据呈现的顺序是：从子组件打印的道具（不包括评论，因此当我尝试提取任何数据时会出现未定义的错误），从子组件打印的道具（包含评论）然后最后打印来自异步 componentDidMount() 的数据。我使用异步的 componentDidMount()，因为我认为将 await this.fetchData() 放在 componentDidMount() 中会导致它等待直到数据被获取。事实并非如此。所以是的，如果有人能告诉我如何正确地加载它一次，那就太好了。我一直在尝试各种不同的东西，所以如果有些事情没有意义或加起来，它可能来自早期的尝试，我会在编辑中澄清。

这是父级的代码

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>
        )
    }
}

和子级

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;