![](/img/trans.png)
[英]Handling multiple api calls with Promis.all and manipulating the data with react-redux
[英]react-redux handling multiple data with redux
我正在尝试使用 redux 设置全局状态,当我尝试传递单个数据时它有效,但当我尝试传递多个数据时它不起作用。 下面是我的代码:
<CSButton
onPress={() => {
this.setState({
comment : this.state.comment,
region : this.state.region,
},
() => this.props.commentHandler(this.state),
this.props.regionHandler(this.state),
// I am getting correct answer when I console.log here
() => console.log(this.props.comment,'this.props.comment?'),
() => console.log(this.props.region,'this.props.region?'))}}>
<Text>Button</Text>
</CSButton>
//when I try to console.log using another button, works fine for 'this.props.comment'
<Button
title='comment'
onPress={()=> console.log(this.props.comment,'comment')}>
</Button>
//But when I try to console.log `this.props.region` it gives me undefined
<Button
title='region'
onPress={()=> console.log(this.props.region,'region')}>
</Button>
function mapStateToProps(state) {
return {
region : state.region,
comment : state.comment,
}
}
function mapDispatchToProps(dispatch) {
return {
regionHandler : (state) => dispatch({ type: 'REGION', payload: state.region}),
commentHandler : (state) => dispatch({ type: 'COMMENT', payload: state.comment}),
}
}
应用程序.js
const initialState = {
comment:'',
region:[],
}
const reducer = (state = initialState, action) => {
console.log(action);
switch (action.type)
{
case 'COMMENT':
return { comment: action.payload}
case 'REGION':
return { region: action.payload}
}
return state
}
const store = createStore(reducer)
似乎我的代码只调用第一个处理程序this.props.commentHandler(this.state)
而不是第二个this.props.regionHandler(this.state)
。
有没有办法解决这个问题? 任何建议或意见将不胜感激!
this.setState(partialState, callback)
只需要一个回调函数。 你在这里传递两个函数:
() => this.props.commentHandler(this.state),
this.props.regionHandler(this.state),
而是尝试:
() => {
this.props.commentHandler(this.state)
this.props.regionHandler(this.state)
}
您已将初始状态分配给 state state = initialState
但从未使用过。 每次触发操作时,都会向视图发送一个新对象。 您必须将其设置为状态。
试试这个。 你必须以不变的方式做到这一点。
const reducer = (state = initialState, action) => {
switch (action.type)
{
case 'COMMENT':
state = {
...state,
comment: action.payload,
}
break;
case 'REGION':
state = {
...state,
region: action.payload,
}
break;
}
return state
}
我刚刚注意到你错过了breaks;
在你的代码中。
如果您对不可变状态树有疑问。 参考这个免费的视频系列。 关联
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.