javascript - 在父组件获取 API 数据后同步子组件以接受 props

Question

我遇到了一个问题，我无法渲染我的子组件，因为从 API 检索的数据不会在子组件渲染之前发生，导致我从子组件中收到错误:未捕获的类型错误:无法读取未定义的属性“名称”由于在获取 API 数据之前，其依赖于父级的属性是未定义的。

下面是特色组件(父组件):

export default class Featured extends Component {

    constructor() {
        super();
        this.state = {
            restaurants :[],
        }
    }

    componentDidMount() {
        fetch('http://127.0.0.1:5000/restaurants')
        .then(results => {
            return results.json();
        }).then(data => {
            let restaurants = data.items.map((item) => {
                return (
                    {
                        name: item.name,
                        type: item.type,
                        overallRating: item.overallRating,
                        url: item.url
                    }
                )
            })
            this.setState({restaurants: restaurants});
            console.log(this.state.restaurants);
        })
    }

    render() {
        return (
            <Grid>
               <Row className="show-grid text-center">
                    <Col xs={12} sm={4} className="resto-wrapper">
                    <RestaurantCard restaurant = {this.state.restaurants[0]}/>
                    </Col>
                    <Col xs={12} sm={4} className="resto-wrapper">
                      <RestaurantCard restaurant = {this.state.restaurants[0]}/>
                    </Col>
                    <Col xs={12} sm={4} className="resto-wrapper">
                      <RestaurantCard restaurant = {this.state.restaurants[0]}/>
                    </Col>
                </Row> 
            </Grid>
        )
    }
}

这是 RestaurantCard 组件(子组件):

export default class RestaurantCard extends Component {
    constructor(props){
        super(props);
    }
    render() {
        return (
            <div className="restaurantCard">
                <h1>CARD</h1>
                <h1>{this.props.restaurant.name}</h1>
            </div>
        )
    }
}

我尝试过的:ComponentWillMount，不起作用。将数据检索分离到不同的方法并在 Will/Did 安装生命周期方法中调用它是行不通的。

现在我陷入困境，因为我不知道该怎么做。状态对象开始时为空，但一旦 API 完成，它就会包含信息，我如何在 API 完成后计时渲染运行，或者以更好的方式运行？

我正在考虑实现某种缓冲区或其他东西来指示 api 正在加载，但我不知道如何在 React 中做到这一点，我认为 ComponentWill 正在这样做，但似乎没有。任何建议将不胜感激!

谢谢。

Answer 1

这是您需要做的，以确保在返回 props 的值之前获得 api 调用的结果

在您的子组件 RestaurantCard 中添加了一条 if 语句，用于在渲染值之前检查 props 的值

export default class RestaurantCard extends Component {
    constructor(props){
        super(props);
    }
    render() {
    if(!this.props.restaurant){
          return(<div>Loading .......</div>
         }
        return (
            <div className="restaurantCard">
                <h1>CARD</h1>
                <h1>{this.props.restaurant.name}</h1>
            </div>
        )
    }
}