Witam chciałbym zapytać, jak mogę skopiować obiekt ze stanu reakcji do innego stanu tymczasowego. Spróbowałem tak:

    startEditing() {
        this.setState({editMode: true});

        //Save schedule before changes
        this.setState({oldSchedule: this.state.schedule});
    }

    cancelEditing(){
        this.setState({editMode:false});

        //revert changes in schedule
        this.setState({schedule:this.state.oldSchedule});
        this.setState({oldSchedule:null});
    }

Rozumiem, dlaczego to nie działa, ale nie wiem, jak to zrobić poprawnie. Proszę, mógłbyś mi pomóc?

Harmonogram to typ obiektu

3
Young L. 2 kwiecień 2020, 23:03

4 odpowiedzi

Najlepsza odpowiedź

Ponieważ nie kopiujesz poprzedniego obiektu, robisz do niego kolejne odniesienie; powinieneś głęboko skopiować ten obiekt; jednokierunkowe jest użycie json.parse ();

startEditing() {
  this.setState({
    editMode: true,
    oldSchedule: JSON.parse(JSON.stringify(this.state.schedule))
  });
}

cancelEditing(){
  this.setState({
    editMode:false,
    schedule:JSON.parse(JSON.stringify(this.state.oldSchedule)),
    oldSchedule:null
  });
}

1
Mhmdrz_A 2 kwiecień 2020, 20:11

Najbezpieczniejszym sposobem, w jaki możesz spróbować, jest to, bez konieczności wywoływania wielu funkcji setState

startEditing() {
        this.setState({});

        //Save schedule before changes
        this.setState({ oldSchedule: { ...this.state.schedule }, editMode: true });
    }

    cancelEditing() {
        this.setState((prevState) => {
            return {
                editMode: false,
                schedule: prevState.oldSchedule,
                oldSchedule: null
            }
        });
    }
2
iamwebkalakaar 2 kwiecień 2020, 20:47

Możesz wypróbować zupełnie inne podejście -

  1. Użytkownik przechodzi do trybu edycji
  2. Wszystkie zmiany są przechowywane w osobnym stanie tymczasowym. Na przykład: this.state.draft = ...
  3. Stan oryginalny jest zastępowany stanem roboczym tylko wtedy, gdy użytkownik kliknie „Zapisz”
  4. Cały stan roboczy jest odrzucany, jeśli użytkownik kliknie „Anuluj”
1
Guest 2 kwiecień 2020, 20:11

Jeśli harmonogram jest obiektem, powinieneś wykonać kopię obiektu zamiast samego obiektu:

startEditing() {
    this.setState({editMode: true});

    //Save schedule before changes
    this.setState({oldSchedule: {...this.state.schedule}});
}

cancelEditing(){
    this.setState({editMode:false});

    //revert changes in schedule
    this.setState({schedule: {...this.state.oldSchedule}});
    this.setState({oldSchedule:null});
}
1
ageoff 2 kwiecień 2020, 20:06