вложенный const JSX

Question

Я думаю, что это странный вопрос, но у меня есть переменная в React native, например:

const phrases = {
Default: {
    title: "Fetching the Weather",
    subtitle: "Be patient, you're witnessing a miricle",
    highlight: "Fetching",
    color: "#636363",
    background: "#9C9C9C",
},
Clear: {
    title: "It's Amazing Balls",
    subtitle: "Rock that shit!",
    highlight: "Amazing",
    color: "#E32500",
    background: "#FFD017",
},
Rain: {
    title: "Rain rain please go away",
    subtitle: "Stay inside and code all day",
    highlight: "away",
    color: "#004A96",
    background: "#2F343A",
},
Thunderstorm: {
    title: "Thunder Strike",
    subtitle: "Unplug those devices",
    highlight: "Thunder",
    color: "#FBFF46",
    background: "#020202",
},
Clouds: {
    title: "Cloud storage limit reached",
    subtitle: "error: 5000 - cirrocumulus",
    highlight: "limit",
    color: "#0044FF",
    background: "#939393",
},
Snow: {
    title: "Brain Freeze",
    subtitle: "You're not supposed to eat it",
    highlight: "Brain",
    color: "#021D4C",
    background: "#15A678",
},
Drizzle: {
    title: "Meh... don't even ask",
    subtitle: "What did I just say?",
    highlight: "don't",
    color: "#B3F6E4",
    background: "#1FBB68",
},
Mist: {
    title: "Mist title",
    subtitle: "Mist sub",
    highlight: "Mist",
    color: "#B3F6E4",
    background: "#1FBB68",
},

}

теперь, когда я пытаюсь получить доступ к Заголовку, как это:

 phrases[this.state.weather].title

Я получаю эту ошибку:

undefined не является объектом (оценивает фразы (this.state.weather] .title ')

любой может помочь с этим ??

Answer 1

Вы должны убедиться, что given weather является действительным weather для phrases

const phrases = {
  Default: {
    title: "Fetching the Fucking Weather",
    subtitle: "Be patient, you're witnessing a miricle",
    highlight: "Fucking",
    color: "#636363",
    background: "#9C9C9C",
  },
  Clear: {
    title: "It's Fucking Amaze Balls",
    subtitle: "Rock that shit!",
    highlight: "Fucking",
    color: "#E32500",
    background: "#FFD017",
  },
  Rain: {
    title: "Rain rain please go away",
    subtitle: "Stay inside and code all day",
    highlight: "away",
    color: "#004A96",
    background: "#2F343A",
  },
  Thunderstorm: {
    title: "Fucking Thunder Strike",
    subtitle: "Unplug those devices",
    highlight: "Thunder",
    color: "#FBFF46",
    background: "#020202",
  },
  Clouds: {
    title: "Cloud storage limit reached",
    subtitle: "error: 5000 - cirrocumulus",
    highlight: "limit",
    color: "#0044FF",
    background: "#939393",
  },
  Snow: {
    title: "Brain Fucking Freeze",
    subtitle: "You're not supposed to eat it",
    highlight: "Fucking",
    color: "#021D4C",
    background: "#15A678",
  },
  Drizzle: {
    title: "Meh... don't even ask",
    subtitle: "What did I just say?",
    highlight: "don't",
    color: "#B3F6E4",
    background: "#1FBB68",
  },
  Mist: {
    title: "Mist title",
    subtitle: "Mist sub",
    highlight: "Mist",
    color: "#B3F6E4",
    background: "#1FBB68",
  },
};

function phraseExists(name) {
  return Object.prototype.hasOwnProperty.call(phrases, name);
}

function getDefaultPhrase() {
  return phrases.Default;
}

function getPhrase(name) {
  console.log(`Does "${name}" exist?`, phraseExists(name));

  return phraseExists(name) ? phrases[name] : null;
}

function getPhraseOrDefault(name) {
  return getPhrase(name) || getDefaultPhrase();
}


getPhrase('Foo'); // false
getPhrase('Mist'); // true

Answer 2

Вполне вероятно, что this.state.weather вашего компонента имеет значение undefined или что-то еще неожиданное. Такие вещи всегда должны быть разделены в производственном коде, поэтому я рекомендую сначала получить объект из фраз:

let phraseObj = this.state.weather ? phrases[this.state.weather] : undefined;

Затем продолжите, проверив, существует ли значение:

let result = phraseObj && phraseObj.title || 'No weather title found';

Да ... так что, я думаю, что-то еще не работает, что не показано в коде, представленном здесь. Я надеюсь, что вы скоро найдете реальную проблему. :)

Answer 3

Код, подобный этому phrases['Clear'].title работает хорошо. Итак, единственная причина, по которой ваш код phrases[this.state.weather].title не работает - ваш this.state.weather равен undefined