覆盖 React 中的常量文件值

Question

常量文件 -> constant.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 调用，这可能 return 覆盖常量键的值

API 响应示例：

{
  CITY: 'Mysuru'
}

然后 CITY 是常量文件应该用 API 响应之后的新值覆盖，其余的键应该保持它们的值相同。

预期输出：

city: Mysuru
state: karnataka

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

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

2。我们只需要调用一次 API 就可以影响所有组件

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

Answer 1

既然问题变了，我的答案也变了（下面保留原来的答案）。我建议将常量文件重建为 return 常量或来自 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;

覆盖 React 中的常量文件值

Override the constant file values in React

javascript

constants

reactjs

redux