Ошибка при создании нового объекта из существующего с помощью `...`: в этой среде источники для назначения ДОЛЖНЫ быть объектом

В моем приложении React Native у меня есть ситуация, когда один конкретный ребенок компонента, который я render должен получать либо зеленый, либо красный borderColor.

Теперь я не хочу создавать две отдельные записи в моей styles для этих двух ситуаций, так как они отличаются только свойством borderColor.

Моя идея состояла в том, чтобы получить правильный объект стиля из тех, которые у меня есть в моем styles, например:

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

Однако этот код дает следующую ошибку:

Необработанное исключение JS: в этой среде источники для назначения ДОЛЖЕН быть объектом. Эта ошибка - это оптимизация производительности, а не совместимый со спецификацией.

По-видимому, ошибка попадает на строку, где я определяю amountStyles. Кто-нибудь знает, почему это происходит? Что-то не так с моим синтаксисом? Я использую нотацию ... для создания нового объекта из существующего и добавляю к нему дополнительные свойства.

Ответы

Ответ 1

Как указывал @PitaJ, моя проблема заключалась в том, что StyleSheet.create не возвращает простой объект javascript, поэтому оператор ... не может быть применен.

Я хочу только добавить решение к моей исходной проблеме, это было бы создание двух разных объектов стиля из одного базового, в котором добавлено только одно свойство.

docs для API StyleSheet указывает, что для этого можно использовать метод flatten:

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

Ответ 2

Похоже, что функция factory не возвращает объект JavaScript с требуемым свойством и что среда не хочет применять оператор спреда к значению undefined. Если вы хотите использовать его, вытащите объект, который вы передаете этой функции, в другую переменную.