Переопределить постоянные значения файла в React

файл констант -> константа.js

export default {
  CITY: 'Banglore',
  STATE: 'Karnataka'
}

Показать название города по умолчанию -> address.jsx

import React from "react";
import CONSTANTS from "./constants";
import "./styles.css";

const Address = () => {
  return (
    <div className = "App">
      <p> City : {`${CONSTANTS.CITY}`} </p>
      <p> State : {`${CONSTANTS.STATE}`} </p>
    </div>
  );
};
export default Address;

ожидаемый результат:

city: banglore
state: karnataka

мы импортируем постоянные значения из файла Constant.js, теперь проблема в том, что нам нужно сделать один вызов API, который может вернуть переопределяющие значения для постоянных ключей

пример ответа API:

{
  CITY: 'Mysuru'
}

тогда CITY является постоянным файлом, который должен переопределять новое значение, которое приходит после ответа API, а остальные ключи должны сохранять свои значения прежними.

ожидаемый результат:

city: Mysuru
state: karnataka

это основная проблема для меня, на самом деле наше приложение уже находится в середине фазы разработки, и более 500+ постоянных ключей импортированы в 100+ компонентов.

1. мы используем избыточность в нашем приложении

2. мы должны вызвать API только один раз, что должно повлиять на все компоненты

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
1 356
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку вопрос изменился, изменился и мой ответ (сохранив исходный ответ ниже). Я бы предложил перестроить файл констант либо для возврата констант, либо из Localstorage. Однако имейте в виду, что текущие компоненты не будут перестроены с использованием этого подхода. Единственное, что вызовет перестроение, — это либо использование Redux для этого, либо локальное управление состоянием.

const data = {
  CITY: 'Banglore',
  STATE: 'Karnataka'
}

const getData = () => {
  let localData = window.localStorage.getItem('const-data');

  if (!localData) {
    axios.get('url')
      .then(response => {
        localData = {...response.data};
        window.localStorage.setItem('const-data', JSON.stringify({...localData}));
      });
  }

  return localData ? localData : data;
}

export default getData();

Оригинальный ответ:

Вот как я решил бы это, используя локальное состояние. Это было некоторое время назад, так как я использовал Redux. Хотя должен применяться тот же принцип, вместо помещения данных в локальное состояние поместите их в Redux.

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

import React, { useEffect } from "react";
import CONSTANTS from "./constants";
import "./styles.css";

const Address = () => {
  const [constants, setConstants] = useState({...CONSTANTS});
  
  useEffect(() => {
    //api call
    //setConstants({...apiData});
  }, []);
  
  return (
    <div className = "App">
      <p> City : {`${constants.CITY}`} </p>
      <p> State : {`${constants.STATE}`} </p>
    </div>
  );
};
export default Address;

существует более 100+ чистых компонентов, которые импортируют константы, и я думаю, может быть, это будет плохой идеей - подключить избыточность для презентационных компонентов.

Sunil Kumar 25.12.2020 19:51

Не могли бы вы поместить вызов API в файл констант и сделать так, чтобы константы либо возвращали значение по умолчанию, либо возвращали данные из вызова API?

Tomas 25.12.2020 19:52

реагирующие компоненты вернут JSON ?? - это будет невозможно

Sunil Kumar 25.12.2020 19:55

Вы используете JS - все возможно :).

Tomas 25.12.2020 20:10

Я надеюсь, что приведенное выше решение даст вам представление о том, как вы могли бы работать с файлом констант.

Tomas 25.12.2020 20:11

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

Tomas 26.12.2020 22:50

Другие вопросы по теме