无法从子组件内的父组件获取道具

Question

我有一个父组件从API获取一些数据，并将数据存储在状态中，然后将其传递给子组件，如下所示：

export default class TourDetailsPage extends Component {
    constructor(props){
        super(props);
        this.state = {
            tour: ''
        };
      }

    componentDidMount = async () => {
        const name = this.props.match.params.name.replace(/-/g, ' ');
        const res = await fetch(`http://127.0.0.1:8000/api/v1/tours?name=${name}`);
        const tour = await res.json();
        this.setState({tour: tour.data.docs[0]});
    }

    render() {
        return (
            <Fragment>
                <Container style={{width:'90%'}}>
                    <Grid>
                        <Grid.Row>
                            <Grid.Column width={16} textAlign={"center"}>
                                <TourDetailsHeader
                                    tour={this.state.tour}
                                />
                            </Grid.Column>
                        </Grid.Row>
                    </Grid>
                </Container>
            </Fragment>
        )
    }
}

在我的子组件中，我有两个问题，一个是：我想在componentDidMount中接收一个道具（ratingsAverage），但在render（）函数中接收ratingsAverage时未定义。另一个是：在我的render（）函数中，我只能接收非对象或数组的数据，当我接收到一个对象并希望访问该对象的属性时，它会给我一个错误，即无法读取未定义的属性。我的子组件代码：在子组件中，“startLocation”是来自父组件的对象，而我无法访问它的属性。

class TourDetailsHeader extends Component{
    constructor(props){
        super(props);
        this.state = {
            value: 0
        };
      }

    componentDidMount = () => {
        const { ratingsAverage } = this.props.tour;
        console.log(ratingsAverage); // output undefined

    }

    render() {
        console.log(this.props.tour);
        const {name, imageCover, ratingsAverage, duration, startLocation} = this.props.tour;
        return(
            <Fragment>
            <Segment.Group>
                <Segment basic attached="top" style={{ padding: '0' }}>
                    <Image src={`/tours/${imageCover}`} style={eventImageStyle} />
                    <Segment basic style={eventImageTextStyle}>
                        <Item.Group>
                            <Item>
                                <Item.Content>

                                    <Item.Description style={{marginTop: '3%'}}>
                                        <Grid>
                                            <Grid.Column width={5}>
                                                <Icon name='plane' size={'big'} color={'green'}/>
                                                {startLocation.description}
                                            </Grid.Column>
                                        </Grid>
                                    </Item.Description>
                                </Item.Content>
                            </Item>
                            <Item>

                            </Item>
                        </Item.Group>
                    </Segment>
                </Segment>
            </Segment.Group>
        </Fragment>
        )
    }
}

如果有人能帮我，我将不胜感激！

Answer 1

为什么在子组件中使用未定义的值获得分级存储空间？在React中，组件的生命周期是初始化构造函数-

js lang-js prettyprint-override">class TourDetailsHeader extends Component{
    ...
    componentDidUpdate() {
        const { ratingsAverage } = this.props.tour;
        console.log(ratingsAverage);
    }

    render() {
        console.log(this.props.tour);
        const {name, imageCover, ratingsAverage, duration, startLocation} = this.props.tour;
        return(
            ...
              <Grid.Column width={5}>
                  <Icon name='plane' size={'big'} color={'green'}/>
                  {startLocation && startLocation.description}
              </Grid.Column>
            ...
        )
    }
}