reactjs - 从 React JS 中的 componentDidMount 获取

Question

我有一个组件<BaseMap />和一条取线 fetchUser={this.fetchUser.bind(this)}我在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>
        );
    }
}