javascript - Dropdown blank and not updating React

Question

I have a problem when submiting 2 dropdowns in React. This is how my dropdowns look after loading the page:

The problem is that at first I can choose whatever value I want from the 2 dropdowns but the Value that WILL BE PASSED after pressing the button is the last element from the last dropdown I handled. For example, here I chose at last Messenger from dropdown Canal, so the value that will be passed by is just Messenger and not also the 'Ambos' element:

After pressing the button we will see one of the errors. Tipos de Atención dropdown will be empty and my Canal dropdown full:

Whats Happening? What I want is that the user can choose whatever dropdown he wants with all the possible combinations from both dropdowns. Not just one. And that all elements from the dropdowns are displayed when clicking the button.

This is my code:

dropdown.js (reducer)

import * as actionTypes from '../actions';

const initialState = {
    selection: 'Ambos',
    dropdownValues: ['Chatbot', 'Agente'],

    selectionME: 'Todos',
    dropdownValuesME: ['Messenger', 'Web', 'WhatsApp'],
};

const reducer = ( state = initialState, action ) => {

    switch ( action.type ) {
        case actionTypes.UPDATE_SELECTION:
        {
            return {
                ...state,
                selection: action.dataSelected,
                dropdownValues: action.dropdownValues,
                selectionME: action.dataSelectedME,
                dropdownValuesME: action.dropdownValuesME,
            }
        }

        default: {
         //statements;
         break;
        }
    }
    return state;
};


export default reducer;

And my two dropdown handlers:

dropdownselect.js

class DropdownSelect extends Component {

  constructor(props)
{
  super(props);
  this.state = {
    dropdownOpen: false,
    solved: this.props.selectData,
    dropdownValues: [],

  }
  console.log(props)
}

componentDidMount() {
  if(this.props.onRef)
  this.props.onRef(this);
  this.setState({
    dropdownValues: this.props.dropdownValues,
  })

}

toggleDropdown = () => {
  this.setState({
    dropdownOpen: !this.state.dropdownOpen
  });
}

changeDropdownValue = async (event) => {
    const currentSolved = this.state.solved
    let newdropdownValues = this.state.dropdownValues.concat(currentSolved)
    newdropdownValues = newdropdownValues.filter(item => item !== event.target.innerText)
    console.log(currentSolved)
    console.log(newdropdownValues)
    this.setState({
        dropdownOpen: !this.state.dropdownOpen,
        solved: event.target.innerText,
        dropdownValues: newdropdownValues
    }, () => {
       this.props.onUpdate(this.state.solved, this.state.dropdownValues);
    });
}

  render() {
    return (<>
      <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDropdown}>
        <DropdownToggle caret>
        {this.state.solved}
        </DropdownToggle>
        <DropdownMenu>
        {this.state.dropdownValues && this.state.dropdownValues.map(e => {return <DropdownItem key={e} onClick={this.changeDropdownValue}>{e}</DropdownItem>})}
        </DropdownMenu>
        </ButtonDropdown>
        </>
    );
  }
}

const mapStateToProps = state => ({
  //selectData: state.dropDownReducer.selection || [],
  //dropdownValues: state.dropDownReducer.dropdownValues || ['Ambos', 'Chatbot', 'Agente'],
  selectData: state.dropDownReducer.selection,
  dropdownValues: state.dropDownReducer.dropdownValues
});

const mapDispatchToProps = dispatch => {
    return {
        onUpdate: (selected, dropdownValues) => dispatch({type: actionTypes.UPDATE_SELECTION, dataSelected: selected, dropdownValues:dropdownValues})
          }
};

export default connect(mapStateToProps, mapDispatchToProps)(DropdownSelect);

dropdownselectme.js

class DropdownSelectME extends Component {
//
  constructor(props)
{
  super(props);
  this.state = {
    dropdownOpenME: false,
    solvedME: this.props.selectDataME,
    dropdownValuesME: []
  }
  console.log(props)
}

componentDidMount() {
  if(this.props.onRef)
    this.props.onRef(this);    
  this.setState({
    dropdownValuesME: this.props.dropdownValuesME
  });
}

toggleDropdownME = () => {
  this.setState({
    dropdownOpenME: !this.state.dropdownOpenME
  });
}

changeDropdownValueME = async (event) => {
    const currentSolvedME = this.state.solvedME
    let newdropdownValuesME = this.state.dropdownValuesME.concat(currentSolvedME)
    newdropdownValuesME = newdropdownValuesME.filter(item => item !== event.target.innerText)
    this.setState({
      dropdownOpenME: !this.state.dropdownOpenME,
      solvedME: event.target.innerText,
      dropdownValuesME: newdropdownValuesME
  }, () => {
    this.props.onUpdate(this.state.solvedME, this.state.dropdownValuesME);
  });
}

  render() {
    return (<>
      <UncontrolledDropdown ButtonDropdown 
        isOpen={this.state.dropdownOpenME} 
        toggle={this.toggleDropdownME}
      >
        <DropdownToggle caret>
          {this.state.solvedME}
        </DropdownToggle>
        <DropdownMenu
            modifiers={{
                setMaxHeight: {
                enabled: true,
                order: 890,
                fn: (data) => {
                    return {
                    ...data,
                    styles: {
                        ...data.styles,
                        overflow: 'auto',
                        maxHeight: 300,
                    },
                    };
                },
                },
            }}
        >
          {this.state.dropdownValuesME && this.state.dropdownValuesME.map(event => {return <DropdownItem key={event} onClick={this.changeDropdownValueME}>{event}</DropdownItem>})}
        </DropdownMenu>
        </UncontrolledDropdown>
        </>
    );
  }
}

const mapStateToProps = state => ({
  //selectDataME: state.dropDownMEReducer.selectionME || [],
  //dropdownValuesME: state.dropDownMEReducer.dropdownValuesME||['Todos', 'Messenger', 'Web', 'WhatsApp'],
  selectDataME: state.dropDownReducer.selectionME ,
  dropdownValuesME: state.dropDownReducer.dropdownValuesME,

});

const mapDispatchToProps = dispatch => {
    return {
      
        onUpdate: (selectedME, dropdownValuesME) => dispatch({type: actionTypes.UPDATE_SELECTION, dataSelectedME: selectedME, dropdownValuesME:dropdownValuesME})
          }
};

export default connect(mapStateToProps, mapDispatchToProps)(DropdownSelectME);

Answer 1

等待大神答复