覆盖 React 中的常量文件值

Question

常量文件 -> 常量.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

这对我来说是基本问题案例，实际上我们的应用程序已经处于开发中期，并且在 100 多个组件中导入了 500 多个常量键。

1.我们在我们的应用程序中使用 redux

2.我们只需要调用一次 API 就会影响所有组件

解决这个问题的最佳方法是什么，一旦我调用后端，我如何覆盖我的常量文件，谢谢

Answer 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;