0

Estou tentando usar o form.select do semantic-ui mas estou recebendo undefined no meu payload reducer:

O que eu tentei:

<Form.Select
    fluid
    label='Gender'
    options={workoutOptions}
    placeholder='Atividades'
    onChange={this.props.changeTipoTarefa}
    value={this.props.tipoTarefa}
/>

Eu defini essa constante fora da minha classe:

const workoutOptions = [
    { text: 'Run', value: 'run' },
    { text: 'Swimming', value: 'swimming' },
    { text: 'Bike', value: 'bike' },
]

Meu reducer:

const INITIAL_STATE = { tempoGasto: '', tipoTarefa: '', data: '', list: [] }

export default (state = INITIAL_STATE, action) => {
    console.log(action.type)
    console.log(action)
    switch(action.type) {
        case 'TEMPOGASTO_CHANGED':
            return { ...state, tempoGasto: action.payload }
        case 'TIPOATIVIDADE_CHANGED':
            return { ...state, tipoTarefa: action.payload }
        case 'DATATAREFA_CHANGED':
            return { ...state, changeDataTarefa: action.payload }
        case 'WORKOUT_SEARCHED':
            return { ...state, list: action.payload }
        default:
            return state
    }
}

Estou recebendo undefined conforme mostra no meu console.log:

TIPOATIVIDADE_CHANGED

payload: undefined

type: "TIPOATIVIDADE_CHANGED"

Como eu posso pegar o valor selecionado no select?

export const changeTipoTarefa = event => ({
    type: 'TIPOATIVIDADE_CHANGED',
    payload: event.target.value
})

Suponho que ali no payload: event.target.value esteja o problema, porém não sei o que substituir.

1 Resposta 1

0

Pelo que eu vi do seu código, ao ocorrer o evento "OnChange" do seu component "Select" ele executa o reducer. O problema é que ele não manda o valor. Uma forma de resolver isso seria criar uma função para tratar o "onChange", recuperar o valor e chamar o reducer. O seu código ficaria assim:

class MinhaClasse extends Component {
  
  alterar = e => {
    this.props.changeTipoTarefa(e.target.value);
  };

  render() {
    const { email, password } = this.state;
    return (

<Form.Select
    fluid
    label='Gender'
    options={workoutOptions}
    placeholder='Atividades'
    onChange={this.alterar}
    value={this.props.tipoTarefa}
/>

)
}
}

No seu reducer, você receberia o valor da seguinte forma:

export const changeTipoTarefa = valor => ({
    type: 'TIPOATIVIDADE_CHANGED',
    payload: valor
})

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .