Question

问题陈述

我正处于学习阶段，我正在尝试使用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>

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

使用componentDidMount

问题陈述

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

TL; DR

1 个答案: