覆盖 React

编程问答 2022-06-01

问题描述

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