[英]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.