我正处于学习阶段,我正在尝试使用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
是否有值,但为了简单起见,我就这样写了。
创建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()
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);
我想在componentDidMount()
中使用变量(来自状态)调用axios请求,但是变量不会立即加载,因此我无法调用该操作,因为变量为空。< / p>
答案 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);
}
}