Próba zarejestrowania wartości elementów nazwa , dzień i dob przechowywanych w dataEdited jako obiekt. Dwa z elementów display Undefined , gdzie tylko jeden wyświetla poprawną wartość. Oto kod

/*    two-way state binding   */
dataChange(event){
        const target = event.target;
        const value = target.value; //gets value of the textbox
        const name = target.name;

        this.setState({ dataEdited: {[name]: value} });
    }
handleUpdate(event){
        event.preventDefault();
        const {name,day,dob} = this.state.dataEdited;
        console.log(name, day, dob);

        /* this.setState({ toggle: false }) */

    }   

Stan

this.state = {
            name: '',
            day: '',
            dob: '',
            items : [],
            currentItem: {},
            dataEdited: {},
            toggle: false,
            loading: false
        }

Renderowanie

<form onSubmit={this.handleUpdate}>
                                <input 
                                    className=""
                                    name="name"                             
                                    onChange={this.dataChange}
                                    defaultValue={this.state.currentItem.name}
                                    placeholder= "Celebrant's Name" 
                                    ref={name => this.name = name}
                                    required /> 
                                <input 
                                    className=""
                                    type="number" 
                                    name="day"
                                    min="1" 
                                    max="31"
                                    ref={day => this.day = day}
                                    onChange={this.dataChange}
                                    defaultValue={this.state.currentItem.day}
                                    placeholder= "day"  />
                                <input 
                                    className=""
                                    name="dob"
                                    type="month"                                
                                    onChange={this.dataChange}
                                    defaultValue={this.state.currentItem.dob} />

                                <button type="submit">update</button>
                                <button onClick={this.handleEditCancel}>cancel</button>
</form>

To jest wynik na konsoli

undefined undefined "2020-08"

Nie rozumiem, jak to jest możliwe, czy mogę uzyskać wyjaśnienie. Jak mogę to naprawić?

0
henrie 2 kwiecień 2020, 12:18

3 odpowiedzi

Najlepsza odpowiedź

Kiedy wykonujesz this.setState({ dataEdited: {[name]: value} });, nadpisujesz inne wartości w obiekcie przypisanym do dataEdited.

Powinieneś to zmienić na this.setState({ dataEdited: { ...this.state.dataEdited, [name]: value} });, aby zachować poprzednie wartości wewnątrz this.state.dataEdited

AKTUALIZACJA (z podziękowaniami @JMadelaine) : użyj this.setState(prev => ({ dataEdited: { ...prev.dataEdited, [name]: value}}));, aby upewnić się, że żadne równoczesne zmiany stanu nie wpływają na setState()

Więcej informacji: https://stackoverflow.com/a/50837784/10201813

3
perlindstroem 2 kwiecień 2020, 09:46

Za każdym razem, gdy dzwonisz, nadpisujesz zmienną stanu dataEdited

this.setState({ dataEdited: {[name]: value} });

Więc chcesz zmienić rozłożenie obiektu dataEdited i state Następnie dodaj lub zmień nazwę, datę lub dzień

  this.setState({
  ...this.state,
  dataEdited: { ...this.state.dataEdited, [name]: value }
});

CodeSandbox tutaj

0
Abdullah Abid 2 kwiecień 2020, 10:27

Problem

Nadpisujesz tę samą zmienną dataEdited w kółko, dzwoniąc this.setState({ dataEdited: {[name]: value} }); Dlatego w dataEdited będą obecne tylko ostatnio zmienione dane

Rozwiązanie

Oddzielnie zapisz dane lub odpowiednio zmień funkcję setState

2
Community 20 czerwiec 2020, 09:12