Обновление объекта состояния внутри массива из дочернего компонента

#javascript #reactjs #state

#javascript #reactjs #состояние

Вопрос:

Сначала я хочу извиниться, потому что я новичок в использовании react, поэтому наверняка я делаю что-то действительно неправильное.

Тем не менее, мне нужно обновить определенное состояние родительского компонента из дочернего компонента, я использую обработчик внутри родительского компонента для обработки всех изменений состояния, но, похоже, это не работает, когда у меня есть массивы и объекты, также я могу добавлять объекты в состояние ‘inpHotel’, пока что у меня есть:

Родительский

 state = {
    activeStep: 0,
    fade: false,
    inpDestino: null,
    inpPeriodo: null,
    inpHotel: [{
        "nomeHotel": null,
        "urlMenorPreco": null,
        "quartos":[]
    }],
    inpNome: null,
    inpEmail: null,
    inpCelular: null,
};

//Handle function
handleChange = input => e => {
    this.setState({ [input]: e.target.value });
};

Дочерний

 <Grid item xs={12}>
    <TextField
        defaultValue={values.inpHotel[length].quartos[i].categoriaQuarto}
        onChange={     
            handleChange(`inpHotel[${length}].quartos[${i}].categoriaQuarto`)
        }
    />
</Grid>

РЕДАКТИРОВАТЬ 1

Мое состояние должно выглядеть следующим образом JSON

 {
    "chCidade": 0,
    "dataCheckIn": "",  
    "dataCheckOut": "",  
    "nome": "",
    "sobrenome": "",
    "celular": "",
    "email": "",
    "hoteis":
    [
        {   
            "nomeHotel": "",
            "urlMenorPreco": "",
            "quartos":[{
                "categoriaQuarto": "",
                "menorPrecoDiaria": 0,
                "quantidadeAdulto": "",
                "criancas":[{"idade":0},{"idade":0}]
            },{
                "categoriaQuarto": "",
                "menorPrecoDiaria": 0,
                "quantidadeAdulto": 0,
                "criancas":[]
            }]
        },
        {
            "nomeHotel": "",
            "urlMenorPreco": "",
            "quartos":[{
                "categoriaQuarto": "",
                "menorPrecoDiaria": 0,
                "quantidadeAdulto": 0,
                "criancas":[{"idade":0},{"idade":0}]
            }]
        }
    ]
}

1. попробуйте это: onChange={ () => handleChange( inpHotel[${длина}].quartos[${i}].категорияQuarto ) }

2. В дочернем компоненте попробуйте выполнить: onChange={ () => handleChange(paramYouWantToSend) }

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

4. @noobprogrammer сработал не так, как ожидалось, но спасибо за ваше время!

5. @T04435 я читаю и пытаюсь понять, спасибо!

Ответ №1:

Я обнаружил, что вы используете e.target.value который является событием, но вы не передаете объект event на свой onChange .

Попробуйте это

onChange={(e) => handleChange(inpHotel[${length}].quartos[${i}].categoriaQuarto, e)}

Вот пример кода: https://codepen.io/gadawag/pen/vPoavP?editors=1010

Ответ №2:

Вы вызываете функцию handleChange() напрямую, и она вернет undefined . Итак, вы устанавливаете для onChange события значение undefined .Вы могли бы использовать функцию-оболочку

 onChange={() => handleChange(`inpHotel[${length}].quartos[${i}].categoriaQuarto`)}