реагировать на избыточность, обрабатывая многократные данные с избыточностью

Question

Я пытаюсь установить глобальное состояние с использованием избыточности, и оно работает, когда я пытаюсь передать отдельные данные, но не работает, когда я пытаюсь передать несколько данных. Ниже мой код:

<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}),

    }
}

App.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).

Есть ли способ, которым я мог бы решить эту проблему? Любые советы или комментарии будут очень признательны!

Answer 1

Вы присвоили свое начальное состояние состоянию 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; в вашем коде.

Если у вас есть сомнения по поводу неизменяемого дерева состояний. обратитесь к этой бесплатной серии видео. Ссылка

Answer 2

this.setState(partialState, callback) принимает только одну функцию обратного вызова. Вы передаете здесь две функции:

 () => this.props.commentHandler(this.state),
       this.props.regionHandler(this.state), 

Вместо этого попробуйте:

() => {
  this.props.commentHandler(this.state)
  this.props.regionHandler(this.state)
}