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