从 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 组件的 render 方法中调用 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 获取

Fetch from componentDidMount in React JS

fetch

reactjs