Jak ustawić wartość setState dla macierzy zagnieżdżonej?

Question

Dla wtyczki używam muszę mieć stan, który wygląda tak:

getInitialState() { 
    return { 
    invalid: true, 
    access: { 
     access_code: '', 
     zipcode: '', 
     password: '', 
     confirm: '', 
     hospital_id: '', 
    }, 
    } 
}, 

jak bym ustawić stan hospital_id bez ustawiania resztę dostępu?

Wydaje się usunąć wszystko, ale hospital_id:

this.setState({access: {hospital_id: 1}}) 

Answer 1

Można użyć Object.assign lub przedmiot Rozłóż propozycję utworzenia kopii obiektów ze zaktualizowanymi właściwościami.

this.setState({ 
    access: { 
    ...this.state.access, 
    hospital_id: 1, 
    }, 
}); 

this.setState({ 
    access: Object.assign({}, this.state.access, { 
    hospital_id: 1, 
    }), 
}); 

Albo najkrótszej wersji i aktualizacji atomowej:

this.setState(({access}) => ({access: { 
    ...access, 
    hospital_id: 1, 
}}); 

I jeszcze jedna opcja jest dodatek aktualizacje:

var update = require('react-addons-update'); 
this.setState({ 
    access: update(this.state.access, { 
    hospital_id: {$set: 1}, 
    }) 
}); 

użyłbym pierwszego.

Answer 2

let newAccess = Object.assign({}, this.state.access); 
 
newAccess.hospital_id = 1; 
 
this.setState({access: newAccess});

Answer 3

Zazwyczaj byś wziąć głęboki kopię obiektu w pytaniu, a potem po prostu zmienić nowe właściwości.

Nie powoduje to jednak usunięcia wszystkiego poza identyfikatorem hospital_id, ale zastępuje go. Ustawienie stanu musi zawierać pełny stan.

Więc albo użyć rozszerzenie sklonować obiekt i zmienić właściwości, lub jeśli nie jest to dużo pracy można zrobić coś takiego:

this.setState({ 
    invalid: state.invalid, 
    access: { 
    access_code: state.access.access_code, 
    zipcode: state.access.zipcode, 
    password: state.access.password, 
    confirm: state.access.confirm, 
    hospital_id: 1, 
    } 
}); 

Answer 4

Mój preferowany sposób robi to teraz jest tak proste, jak:

let newAccess = this.state.access; 
newAccess.hospital_id = 1; 
setState({access: newAccess}); 

Nieco prostszy niż obecny odpowiedź zaakceptowana.

EDIT (w oparciu o pytania z @SILENT)

Wygląda to rzeczywiście potencjalnie niebezpieczna metoda. Dalsza lektura tutaj React: A (very brief) talk about immutability.

Wygląda na to lepszy sposób to zrobić byłoby:

let newAccess = Object.assign({}, this.state.access, {hospital_id:1}); 
this.setState({access: newAccess}); 

Answer 5

Innym sposobem na to byłoby

const newAccess = {...this.state.access}; 
newAccess.hospital_id = 1; 
setState({access: newAccess}); 

Zastosowanie spread operator tworzy klona this.state.access.