Errore durante la creazione di un nuovo oggetto da quello esistente usando `...`: In questo ambiente le fonti per assegnare DEVONO essere un oggetto

Question

Nella mia app React Native, ho una situazione in cui un particolare figlio di un componente che I render dovrebbe ricevere uno borderColor verde o rosso.

Ora, non voglio creare due voci separate nel mio styles per queste due situazioni poiché differiscono solo nella proprietà borderColor.

La mia idea era quella di ricavare l'oggetto proprio stile da quelle che ho nella mia styles in questo modo:

const styles = StyleSheet.create({ 
    amountSection: { 
    borderWidth: 1, 
    flex: 1, 
    flexDirection: 'row', 
    borderRadius: 3 
    } 
}) 

render() { 
    const amountBorderColor = this.state.isClaim ? 'green' : 'red' 
    const amountStyles = { 
    ...styles.amountSection, 
    borderColor: amountBorderColor 
    } 

    return (
    // ... apply amountStyles at appropriate component 
) 
} 

Tuttavia, questo codice dà il seguente errore:

Unhandled JS Exception: In this environment the sources for assign MUST be an object.This error is a performance optimization and not spec compliant.

A quanto pare il errore viene colpito sulla riga dove definisco amountStyles. Qualcuno sa perché questo succede? C'è qualcosa di sbagliato nella mia sintassi? Sto usando la notazione ... per creare un nuovo oggetto da uno esistente e aggiungervi alcune proprietà aggiuntive.

Answer 1

Come @PitaJ ha sottolineato, il mio problema era che StyleSheet.create non restituisce un semplice javascript oggetto, quindi l'operatore ... non può essere applicato.

Voglio solo aggiungere una soluzione al mio problema originale, cioè ricavare due oggetti di stile diversi da uno di base in cui è stata aggiunta una sola proprietà.

Il docs per il StyleSheet API indicano che il metodo flatten può essere utilizzato per questo:

const amountBorderColor = this.state.isClaim ? 'green' : 'red' 
const amountStyles = StyleSheet.flatten([styles.amountSection, {borderColor: amountBorderColor}]) 

Answer 2

Sembra che la funzione di fabbrica non restituisca un oggetto JavaScript con la proprietà che è necessario e che l'ambiente non desideri applicare l'operatore di spread a un valore non definito. Se vuoi usarlo, estrai l'oggetto che passi a quella funzione in una variabile diversa.