如何在 parent 中的 fetch 调用的数据传递给它之前停止加载 React child 组件

Question

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

这是 parent

的代码

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

和child

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;

Answer 1

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

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

如何在 parent 中的 fetch 调用的数据传递给它之前停止加载 React child 组件

How to stop React child component from loading before data from fetch call in parent is passed to it

javascript

components

reactjs

react-component