React JS中如何跨文件使用变量？（附日期格式化场景）

问题核心 #

你当前的代码存在两个关键问题：

1. 组件导出的newDateFrom和newDateTill是初始化时的静态值，不会随着dateFrom/dateTill的状态更新而同步变化
2. API模块无法直接访问组件内部的响应式状态，因为两者属于独立模块，无组件层级关联

方案一：将API函数改为接收参数的形式（推荐） #

这是最直接轻量的解决方式，让fetchTimeData接收日期参数，在组件内调用时传入最新的格式化后日期。

1. 修改API文件中的fetchTimeData：

export const fetchTimeData = async (newDateFrom, newDateTill) => {
  const response = await fetch(`https://api.punkapi.com/v2/beers?brewed_before=${newDateTill}&brewed_after=${newDateFrom}&per_page=80`)
  const data = await response.json();
  return data
}

2. 在日期选择器组件内调用该函数时，传入当前的newDateFrom和newDateTill：

import { fetchTimeData } from '../api/你的API文件名';

// 组件内部定义触发数据请求的函数
const handleFetchData = async () => {
  try {
    const beerData = await fetchTimeData(newDateFrom, newDateTill);
    // 这里处理获取到的数据，比如更新组件状态
    console.log(beerData);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

// 绑定到按钮点击或其他触发时机
<button onClick={handleFetchData}>获取啤酒数据</button>

方案二：使用React Context共享全局状态（适合多组件共享日期的场景） #

如果你的项目中有多个组件需要用到这两个日期值，可以用Context API将状态全局共享。

1. 创建日期状态Context：

// DateContext.js
import { createContext, useContext, useState } from 'react';

const DateContext = createContext();

export const DateProvider = ({ children }) => {
  const [dateFrom, setDateFrom] = useState('2012-01-01');
  const [dateTill, setDateTill] = useState('2012-12-31');

  // 实时计算格式化后的日期
  const [yearFrom, monthFrom] = dateFrom.split('-');
  const newDateFrom = `${monthFrom}-${yearFrom}`;
  const [yearTill, monthTill] = dateTill.split('-');
  const newDateTill = `${monthTill}-${yearTill}`;

  return (
    <DateContext.Provider value={{ newDateFrom, newDateTill, setDateFrom, setDateTill }}>
      {children}
    </DateContext.Provider>
  );
};

export const useDate = () => useContext(DateContext);

2. 在根组件中包裹DateProvider：

// App.js
import { DateProvider } from './DateContext';

function App() {
  return (
    <DateProvider>
      {/* 你的所有页面/组件 */}
    </DateProvider>
  );
}

3. 在需要调用API的组件中获取日期并请求数据：

import { useDate } from './DateContext';
import { fetchTimeData } from '../api/你的API文件名';

const BeerList = () => {
  const { newDateFrom, newDateTill } = useDate();

  const fetchBeerData = async () => {
    const data = await fetchTimeData(newDateFrom, newDateTill);
    // 处理数据
  };

  return <button onClick={fetchBeerData}>加载数据</button>;
};

内容的提问来源于stack exchange，提问作者jBhullar