файл констант -> константа.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 только один раз, что должно повлиять на все компоненты
как лучше всего решить эту проблему, как я могу переопределить мои постоянные файлы после того, как я позвоню в бэкэнд, спасибо
Поскольку вопрос изменился, изменился и мой ответ (сохранив исходный ответ ниже). Я бы предложил перестроить файл констант либо для возврата констант, либо из 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;
Не могли бы вы поместить вызов API в файл констант и сделать так, чтобы константы либо возвращали значение по умолчанию, либо возвращали данные из вызова API?
реагирующие компоненты вернут JSON ?? - это будет невозможно
Вы используете JS - все возможно :).
Я надеюсь, что приведенное выше решение даст вам представление о том, как вы могли бы работать с файлом констант.
Хорошо, спасибо. Я надеюсь, что это работает хорошо для вас, во всяком случае, это начало, по крайней мере, для динамического изменения значения экспорта файла констант.
существует более 100+ чистых компонентов, которые импортируют константы, и я думаю, может быть, это будет плохой идеей - подключить избыточность для презентационных компонентов.