javascript - 覆盖 React 中的常量文件值

标签 javascript reactjs redux constants

常量文件 -> 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 调用,它可能返回常量键的覆盖值

API 响应示例:

{
  CITY: 'Mysuru'
}

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

预期输出:

city: Mysuru
state: karnataka

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

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

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;

关于javascript - 覆盖 React 中的常量文件值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65450791/

相关文章:

javascript - 如何创建多个排序按钮

javascript - 如何在 React 中设置类的样式

reactjs - 使用 React Router 在 Redux React 应用程序中传递 props

javascript - 如何在常见问题上设置个人 "Was this helpful?"调查?

javascript - 如何获取所选选项的值并将其保存到变量中? (JavaScript)

reactjs - 通过react-helmet添加脚本标签时如何忽略TypeScript错误?

reactjs - 错误: Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & RefAttributes<HTMLFormElement>'

javascript - 将函数存储在 Redux 存储中的替代方法是什么

javascript - Firebase获取以用户输入的字符开头的所有用户名和用户ID

javascript - 无限滚动/循环时内容闪烁/跳跃