Question

我在使用嵌套状态处理Change时遇到问题。有人可以告诉我如何解决这个问题吗？我使它可以处理单个嵌套状态，但它不适用于第二层。任何想法都会有所帮助。

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

如何处理嵌套状态的更改

1 个答案: