react native-redux getting error when handling multiple data

Question

I am using react native-redux to set global state and it works fine when handling single data but when I have multiple data its not working. Below is my code:

 import {connect} from 'react-redux'

    constructor(props){
        super(props)
        this.state = {
        comment:'',
        region:[],
        }
    }

      <Button
                  onPress={() => {
                           this.setState({
                             comment : this.state.comment,
                             // works fine if I only handle comment or region
                             region  : this.state.region,
                             },
                           () => this.props.commentHandler(this.state),
                           () => this.props.regionHandler(this.state)}}>
                                  <Text>UPDATE</Text>
       </Button>
    function mapStateToProps(state) {
        return {
            comment : state.comment,
            region  : state.region
        }
    }

    function mapDispatchToProps(dispatch) {
        return {
            commentHandler : (state) => dispatch({ type: 'COMMENT', payload: state.comment}),
            regionHandler  : (state) => dispatch({ type: 'REGION', payload: state.region})

        }
    }

I don't know what I did wrong but when I try to handle multiple data for example, comment & region it won't work. It works perfectly if I remove () => this.props.commentHandler(this.state) or () => this.props.regionHandler(this.state) but doesn't work together.

Any idea what I might be doing wrong? Any comments or advise would be really appreciated!

since you are using the callback of setState, i would suggest to wrap your handlers into one functionbody like this jsfiddle.net/1eg8L7j3 instead of calling them after each other. — Paulquappe
– Paulquappe, Commented Nov 1, 2018 at 10:08
@Paulquappe thanks for the comments it works if I wrap my handlers into one fucntionbody, however, when I try to call the state i.e this.props.region, this.props.comment in the next screen, it will only display the first state which is this.props.comment the other one will be undefined any idea why? — kirimi
– kirimi, Commented Nov 2, 2018 at 1:24

kirimi · Accepted Answer · 2018-11-01 10:14:44Z

1

Wrapping my handlers into one function made it work. Thanks to @Paulquappe.

  <Button
              onPress={() => {
                       this.setState({
                         comment : this.state.comment,
                         region  : this.state.region,
                         },
                       () => this.props.regionHandler(this.state),this.props.commentHandler(this.state),
                       () => console.log(this.props.comment,'this.props.comment?'),
                       () => console.log(this.props.region,'this.props.region?'))
                     }}>

answered Nov 1, 2018 at 10:14

kirimi

1,4005 gold badges33 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react native-redux getting error when handling multiple data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related