使用componentDidMount

时间:2018-02-14 10:17:50

标签: javascript reactjs react-redux axios

问题陈述

我正处于学习阶段,我正在尝试使用react和redux构建一个项目。 我已经创建了我的操作,缩减器和组件,到目前为止从我的API获取数据很好。 现在我试图调用一个axios请求(存在于一个动作中),但是在URL中有一个变量,但该变量处于该状态。 基本上我想要实现的目标是:

componentDidMount() {
        //call action to load profile data
        let address = this.props.checkweb.address;
        this.props.loadProfile(address);
    }

上述代码的问题是,address在安装组件时为空,并在短时间后可用。如果我使用setTimeout,它可以工作,但我不知道这是否是一个很好的方法。 此代码有效

componentDidMount() {
        //wait 1 sec and call action to load profile data
        setTimeout(function() {
           let address = this.props.checkweb.address;
           this.props.loadProfile(address);
        }, 1000); 
    }

上面的代码可以运行并加载我的数据,但正如我所提到的,我不知道这样做是否合适并且它无法创建未来的问题?当然,我会做一些if/else来检查address是否有值,但为了简单起见,我就这样写了。

我发布了Component,Action和Reducer的代码,以便更好地查看函数

创建loadProfile()的操作部分

export const loadProfile = (address) => (dispatch) => {
   dispatch({
      type: 'PROFILE_REQUEST',
      isLoading: true,
      error: null
});
   return axios.get('https://localhost:8088/api/weapons/'+address)
.then(response => {
  dispatch({
        type: 'PROFILE_SUCCESS',
        isLoading: false,
        data: response.data
  });
})
.catch(err => {
  dispatch({
        type: 'PROFILE_FAILED',
        isLoading: false,
        error: err
  });
  console.error("Failure: ", err);
});
}

这里我们有loadProfile()

的reducer
let profileApiState = {
data: {},
isLoading: false,
error:null
}

const profileApi = (state = profileApiState, action) => {
switch (action.type) {
    case 'PROFILE_REQUEST':
    case 'PROFILE_FAILED':
    return { 
        ...state, 
        isLoading: action.status, 
        error: action.error 
    };
    case 'PROFILE_SUCCESS':
    return {
        ...state, 
        data: action.data, 
        isLoading: action.status,
        error: null 
    };
    default: return {
        ...state
    }

}
}

export default profileApi;

这里我们有我正在进行渲染的组件

class Inventory extends Component {

    componentDidMount() {
        //call action to load weapons
         let address = this.props.checkweb.address;
        this.props.loadProfile(address);
    }

render() {
return (
        <div>
            Some profile data 
            {this.props.profile.data}
        </div>
    );
  }
}
const mapStateToProps = (state) =>{
        return {
            checkweb: state.checkWeb,
            profile: state.profileApi
        };
};

export default connect (mapStateToProps, actionCreators)(Inventory);

TL; DR

我想在componentDidMount()中使用变量(来自状态)调用axios请求,但是变量不会立即加载,因此我无法调用该操作,因为变量为空。< / p>

1 个答案:

答案 0 :(得分:1)

您可以在收到地址道具时使用$(".parent").each(function() { $(".child",this).insertBefore($(".thumbnail",this)); });发出请求:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent parent1">
  <div class="thumbnail childofParent1">thumbnail</div>
  <div class="child childofParent1">childofParent1</div>
</div>
<div class="parent parent2">
  <div class="thumbnail childofParent2">thumbnail</div>
  <div class="child childofParent2">childofParent2</div>
</div>
<div class="parent parent3">
  <div class="thumbnail childofParent3">thumbnail</div>
  <div class="child childofParent3">childofParent3</div>
</div>

编辑:如果您能够通过异步功能(承诺)获得componentWillReceiveProps,则可以执行此操作:

componentWillReceiveProps(nextProps) {
    if (!this.props.checkweb && nextProps.checkweb) {
        this.props.loadProfile(nextProps.checkweb.address);
    }
}