Блог

Главная - Вопросы по программированию - Неудачная деструкция объекта внутри функции

Неудачная деструкция объекта внутри функции

#javascript #react-native #destructuring

#javascript #реагировать — родной #деструктурирование

Вопрос:

У меня есть имя файла js index.js внутри папки utils

Внутри файла:

 export const colors = {
  PRIMARY_COLOR: "#ff304f",
  SECONDARY_COLOR: "#002651",
  BORDER_COLOR: "#dbdbdb",
};

Я пытаюсь деструктурировать его внутри моего WeatherInfo компонента следующим образом:

 import React from "react";
import { StyleSheet, View, Text, Image } from "react-native";

import { colors } from "../utils";

export default function WeatherInfo({ currentWeather }) {

  const { PRIMARY_COLOR } = colors;
  // console.log(colors);

  return (
    <View>
      <Text style={styles.textPrimary}>{temp}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  textPrimary: {
    fontSize: 40,
    color: PRIMARY_COLOR,
  },
});

Я получил сообщение об ошибке Can't find variable: PRIMARY_COLOR , однако, если я console.log(colors) внутри функции, я вижу объект, напечатанный в консоли expo. Однако, если я делаю это вне функции, это работает. Может кто-нибудь объяснить мне, что произошло?

Комментарии:

1. Деструктурирование выполнено успешно, но PRIMARY_COLOR доступно только в теле функции, где оно определено; Я бы посоветовал ознакомиться с областью действия.

2. scotch.io/tutorials/understanding-scope-in-javascript/amp

3. Хорошо, я понял. Кажется, я все понял. Это потому, что я разрушаю цвета внутри функции. Но объект styles находится вне функции, поэтому я не могу получить доступ к PRIMARY_COLOR . Спасибо, я допустил глупые ошибки, спасибо @jonrsharpe

4. Просто переместитесь за пределы функции, в начале модуля, и весь модуль увидит это.

Ответ №1:

Вы все делаете правильно, но вы просто неуместно разместили свой код, он должен быть вне тела функции, вот как он будет доступен на всей странице

 const { PRIMARY_COLOR } = colors;

Переместите его вверх всего на одну строку.