Как обработать изменение на вложенном состоянии

Question

У меня проблема с обработкой изменения вложенного состояния. Может ли кто-нибудь дать мне идею, как решить эту проблему? Я сделал это для обработки одного вложенного состояния, но он не будет работать со вторым слоем. Любые идеи будут полезны.

class EditPage extends React.Component {

    constructor(props) {
        super(props);

        this.state = {

            CourseData: {
                NazwaKursuPL: "",
                NazwaKursuENG: "",
                KierunekStudiów: "",
                StopieńStudiówForma: "",
                RodzajPrzedmiotu: "",
                KodPrzedmiotu: "",
                GrupaKursów: "",
                ZZU: {
                    Wykład: "",
                    Ćwiczenia: "",
                    Labolatorium: "",
                    Projekt: "",
                    Seminarium: ""
                },
                CNPS: {
                    Wykład: "",
                    Ćwiczenia: "",
                    Labolatorium: "",
                    Projekt: "",
                    Seminarium: ""
                },
                FormaZaliczenia: {
                    Wykład: "",
                    Ćwiczenia: "",
                    Labolatorium: "",
                    Projekt: "",
                    Seminarium: ""
                },
                KursKońcowy: {
                    Wykład: "",
                    Ćwiczenia: "",
                    Labolatorium: "",
                    Projekt: "",
                    Seminarium: ""
                },
                ECTS: {
                    Wykład: "",
                    Ćwiczenia: "",
                    Labolatorium: "",
                    Projekt: "",
                    Seminarium: ""
                },
                P: {
                    Wykład: "",
                    Ćwiczenia: "",
                    Labolatorium: "",
                    Projekt: "",
                    Seminarium: ""
                },

                BK: {
                    Wykład: "",
                    Ćwiczenia: "",
                    Labolatorium: "",
                    Projekt: "",
                    Seminarium: ""
                },
                WymaganiaWiedzaUmiejętnościInne: "",
                Cele: "",
            }

        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }


    handleChange(e) {
        const { CourseData } = { ...this.state };
        const currentState = CourseData;
        const { name, value } = e.target;
        currentState[name] = value;

        this.setState({ CourseData: currentState });

    }

Answer 1

Вы можете использовать оператор распространения (...) на каждом уровне следующим образом:

this.setState({...CourseData,ZZU:{...CourseData.ZZU,Projekt:{CourseData.ZZU.Projekt:"test"}}})