Question

我有一个组件<BaseMap />和一个获取行fetchUser={this.fetchUser.bind(this)}，我在render方法中BaseMap之后立即使用了它（例如<BaseMap fetchUser={this.fetchUser.bind(this)}/>）。

然而，有人建议我应该把它放在componentDidMount中。但是我应该怎么做呢？我无法将fetchUser={this.fetchUser.bind(this)}复制到componentDidMount。

Answer 1

据我了解，您的组件设置如下：

class Parent .... {
    ....
    fetchUser(){ 
    ....
    }

    ....
    render(){
        return ( 
        ...
            <BaseMap fetchUser={this.fetchUser.bind(this)}/>
        ...
        );
    }
}

class BaseMap .... {
    ....
    render(){
        let user = this.props.fetchUser();
        return ( 

            <div> { ...use user here ... }</div>

        );
    }
}

如果我错了，请纠正我。

建议您做的是从BaseMap组件渲染方法中调用fetchUser并移至其componentDidMount方法。然后将用户存储在组件的状态中并从那里使用它。

class BaseMap .... {
     constructor(props){
        super(props);
        this.state={user:null};
     }

    componentDidMount(){
        let user = this.props.fetchUser();
        this.setState({user:user});
    }

    render(){
        return ( 
            <div> {this.state.user?  
                       ...use user here ...
                        : "loading data"
            }</div>
        );
    }
}

Answer 2

将fetchUser方法移至BaseMap组件，然后将componentDidMount中的方法调用为this. fetchUser()。否则传递方法作为道具并在目标组件中访问它。

从React JS中的componentDidMount获取

2 个答案: