将 prop 从 child 传递到 parent 为 null

Question

我是 React Native 的新手，正在学习如何使用它构建应用程序。我有一个 child 组件，它会在应用程序打开时立即创建。

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

那个bus.routeID是我以后要用得上的。这是我的 BusMarker 组件。

export default class BusMarker extends Component{
    handleClick = () => {
        routeID = this.props.markerRouteID
        this.props.getThisRoute(routeID)
    }

    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.handleClick}
            />
        )
    }
}

我希望能够按下 BusMarker 图标，获取 routeID，并将其传递给 parent 以用于执行特定功能。

getRouteLine = (routeID) => {
    this.setState({markerRouteID: routeID})
    console.log("Route ID is: " + this.state.markerRouteID)
    //need to do more stuff here.
}

此时，代码有效，但在上面的控制台输出中，它表示 this.state.markerRouteID 是 null.所以我不确定这应该如何工作。我已经做了足够的研究，知道做 .bind() 不是最好的主意，而通过 props 是可行的方法。我看过很多关于将静态数据从 child 传递到 parent 的文章 post，反之亦然。但这让我陷入了困境，我不太确定从这里去哪里。

编辑：我得到了下面的答案，但我想我会post我到达的地方。
这是我正在对 (onPress)

执行操作的 BusMarker Class

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

这是我在 Parent.

中初始化 BusMarker 组件的地方

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

这是我想要在按下 BusMarker 时调用的函数。它位于 parent。它设置 routeLineCoordinates 的状态。

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

parent 构造函数然后需要这个：

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

Answer 1

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

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

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

将 prop 从 child 传递到 parent 为 null

Passing prop from child to parent is null

reactjs

react-native

react-native-maps