Reactjs 将道具从子级传递到父级为空

我对React Native非常陌生，正在学习如何使用它构建应用程序。我有一个子组件，它是在应用程序打开时立即创建的

for(let i = 0; i < this.state.buses.length; i++){
    bus = this.state.buses[i]
    busMarkers.push(
    <BusMarker  
        company={bus.company}
        latitude={bus.location.latitude}
        longitude={bus.location.longitude}
        title={"Bus " + bus.routeNumber}
        description={"This bus is from " + bus.company}
        getThisRoute={this.getRouteLine} //this is the function i want to call when the busMarker is pressed
        markerRouteID={bus.routeID} //trying to give it the usable property here
     />
     )
}

此时，代码可以工作，但在上面的控制台输出中，它表示this.state.markerRouteID为null。所以我不确定这是怎么回事。我已经做了足够多的研究，知道使用.bind（）并不是最好的主意，而使用道具是最好的选择。我看过很多关于将静态数据从孩子传递到父母的帖子，反之亦然。但这让我陷入了一个循环，我不太确定接下来该怎么办

编辑：我得到了下面的答案，但我想我会发布我到达的位置。
这是我正在执行操作的BusMarker类（onPress）

然后，父构造函数需要：

constructor(props){
    super(props)
    this.state = {
        routeLineCoordinates: [],
        markerRouteID: null
    }
    this.getRouteLine = this.getRouteLine.bind(this) 
}

最后是在我的渲染函数中调用的函数

render() {
    return (
        <View style={styles.container}>
            <MapView
                style={styles.map}
                showsUserLocation={true}
                showsMyLocationButton={true}
                initialRegion={this.state.region}
            >
            {this.addBusMarkers()}
            {this.addRouteLine()} //function that uses the changed state from the getRouteLine above
            </MapView>
        </View>
    );
}

render（）{
返回(
{this.addBusMarkers（）}
{this.addRouteLine（）}//函数，该函数使用上述getRouteLine中更改的状态
);
}

您需要在构造函数中绑定函数。（在父组件中）

---

不，绑定是必要的。只是你不能在render中绑定函数，因为它会被多次调用。

我没有使用react native，但是this.setState是异步的，所以要在设置后查看状态，请在

this.setState（{markerRouteID:…}，（）=>console.log（））之后的回调中放置console.log。

。您也在调用父getThisRoute，但它看起来像是名为getRouteLine。希望这对你有所帮助。这条路线是一个叫做getRouteLine的道具。就像我说的，它到达父函数，但它是空的。我会试试你用的函数表示法。同时发布你的父组件。你在parent中绑定函数了吗？好的，我来看看。谢谢getRouteLine函数是否需要看起来有所不同？我真的不明白它的语法。你只需要将回调传递给setState，然后控制台日志。因为setState是一个异步函数

export default class BusMarker extends Component{
    render(){
        return (
            <MapView.Marker
                coordinate={{latitude: this.props.latitude, longitude: this.props.longitude}}
                title={this.props.title}
                description={this.props.description}
                image={busImg}
                onPress={() => this.props.getThisRoute(this.props.markerRouteID)}
            />
        )
    }
}

for(let i = 0; i < this.state.buses.length; i++){
    bus = this.state.buses[i]
    busMarkers.push(
    <BusMarker  
        company={bus.company}
        latitude={bus.location.latitude}
        longitude={bus.location.longitude}
        title={"Bus " + bus.routeNumber}
        description={"This bus is from " + bus.company}
        getThisRoute={this.getRouteLine} //this is the callback function i want to call when the busMarker is pressed
        markerRouteID={bus.routeID} 
     />
     )
}

getRouteLine(routeID){
    apiCalls.getRoute(routeID).then(results => {
        location = JSON.parse(results)
        this.setState({routeLineCoordinates: location})
    })
    .catch(error => {
        console.log("Something went wrong getting Route Line: " + error)
    })
}

constructor(props){
    super(props)
    this.state = {
        routeLineCoordinates: [],
        markerRouteID: null
    }
    this.getRouteLine = this.getRouteLine.bind(this) 
}

render() {
    return (
        <View style={styles.container}>
            <MapView
                style={styles.map}
                showsUserLocation={true}
                showsMyLocationButton={true}
                initialRegion={this.state.region}
            >
            {this.addBusMarkers()}
            {this.addRouteLine()} //function that uses the changed state from the getRouteLine above
            </MapView>
        </View>
    );
}

 constructor(props) {
    super(props) 
    this.yourFunction = this.yourFunction.bind(this)
}