React函数组件中如何导出内部赋值的RoomPricelist1与FacilityPricelist1？

你当前的导出方式之所以返回undefined，核心原因有两个：

1. 模块导出的变量是在模块加载阶段就确定的，此时RoomPricelist1和FacilityPricelist1还未被赋值（初始为undefined），后续组件渲染时的赋值不会同步到已导出的变量上。
2. React组件的useState状态是内部封装的，外部变量无法追踪状态更新，就算手动同步，其他组件也不会感知到变化并重新渲染。

直接导出组件内部状态的方式不符合React的设计思路，以下是几种可行的替代方案：

方案1：状态提升（最适合小型场景） #

如果需要使用数据的组件和PriceChart有共同父组件，把数据请求和状态管理移到父组件，通过props传递给子组件。

父组件示例 #

import React, { useEffect, useState } from "react";
import StudentService from "../../Services/StudentService";
import PriceChart from "./PriceChart";
import TargetComponent from "./TargetComponent"; // 需要数据的其他组件

export function ParentComponent() {
  const [roomPricelist, setRoomPricelist] = useState([]);
  const [facilityPricelist, setFacilityPricelist] = useState([]);

  useEffect(() => {
    // 统一请求数据
    Promise.all([
      StudentService.getroompriceList(),
      StudentService.getfacilitypriceList()
    ]).then(([roomRes, facilityRes]) => {
      setRoomPricelist(roomRes.data || []);
      setFacilityPricelist(facilityRes.data || []);
    }).catch(err => console.log(err));
  }, []);

  return (
    <>
      <PriceChart 
        roomPricelist={roomPricelist} 
        facilityPricelist={facilityPricelist} 
      />
      <TargetComponent 
        roomPricelist={roomPricelist} 
        facilityPricelist={facilityPricelist} 
      />
    </>
  );
}

修改后的PriceChart组件 #

import React from "react";
import PriceChartHtml from "./PriceCharthtml";

// 通过props接收数据
export function PriceChart({ roomPricelist, facilityPricelist }) {
  return (
    <>
      <h3>Price list</h3>
      <h5>Rooms</h5>
      <table className="table table-bordered">
        <thead>
          <tr>
            <th scope="col">Sr. no</th>
            <th scope="col">Description</th>
            <th scope="col">Amount in Rs.</th>
          </tr>
        </thead>
        <tbody>
          {roomPricelist.map((price) => (
            <PriceChartHtml key={price.id} price={price} />
          ))}
        </tbody>
      </table>

      <h5>facilities</h5>
      <table className="table table-bordered">
        <thead>
          <tr>
            <th scope="col">Sr. no</th>
            <th scope="col">Description</th>
            <th scope="col">Amount in Rs.</th>
          </tr>
        </thead>
        <tbody>
          {facilityPricelist.map((price) => (
            <PriceChartHtml key={price.id} price={price} />
          ))}
        </tbody>
      </table>
    </>
  );
}

方案2：Context API（适合跨多层组件共享） #

如果需要在无直接父子关系的组件中共享数据，用React Context实现全局数据共享。

1. 创建PriceContext.js #

import React, { createContext, useContext, useState, useEffect } from "react";
import StudentService from "../../Services/StudentService";

const PriceContext = createContext();

export function PriceProvider({ children }) {
  const [roomPricelist, setRoomPricelist] = useState([]);
  const [facilityPricelist, setFacilityPricelist] = useState([]);

  useEffect(() => {
    Promise.all([
      StudentService.getroompriceList(),
      StudentService.getfacilitypriceList()
    ]).then(([roomRes, facilityRes]) => {
      setRoomPricelist(roomRes.data || []);
      setFacilityPricelist(facilityRes.data || []);
    }).catch(err => console.log(err));
  }, []);

  return (
    <PriceContext.Provider value={{ roomPricelist, facilityPricelist }}>
      {children}
    </PriceContext.Provider>
  );
}

// 自定义hook简化调用
export function usePrice() {
  return useContext(PriceContext);
}

2. 在根组件包裹Provider #

import { PriceProvider } from "./PriceContext";
import PriceChart from "./PriceChart";
import TargetComponent from "./TargetComponent";

function App() {
  return (
    <PriceProvider>
      <PriceChart />
      <TargetComponent />
    </PriceProvider>
  );
}

3. 在组件中使用数据 #

修改PriceChart：

import React from "react";
import PriceChartHtml from "./PriceCharthtml";
import { usePrice } from "./PriceContext";

export function PriceChart() {
  const { roomPricelist, facilityPricelist } = usePrice();

  return (
    // 原渲染逻辑不变
  );
}

其他组件使用：

import { usePrice } from "./PriceContext";

function TargetComponent() {
  const { roomPricelist } = usePrice();
  return <div>房间数量：{roomPricelist.length}</div>;
}

方案3：全局状态管理库（适合大型应用） #

如果应用复杂、有大量共享状态需求，可以用Zustand、Redux等库，以Zustand为例：

1. 安装并创建store #

npm install zustand

// priceStore.js
import { create } from "zustand";
import StudentService from "../../Services/StudentService";

export const usePriceStore = create((set) => ({
  roomPricelist: [],
  facilityPricelist: [],
  // 异步请求数据
  fetchPrices: async () => {
    try {
      const [roomRes, facilityRes] = await Promise.all([
        StudentService.getroompriceList(),
        StudentService.getfacilitypriceList()
      ]);
      set({
        roomPricelist: roomRes.data || [],
        facilityPricelist: facilityRes.data || []
      });
    } catch (err) {
      console.log(err);
    }
  }
}));

2. 在组件中使用 #

修改PriceChart：

import React, { useEffect } from "react";
import PriceChartHtml from "./PriceCharthtml";
import { usePriceStore } from "./priceStore";

export function PriceChart() {
  const roomPricelist = usePriceStore(state => state.roomPricelist);
  const facilityPricelist = usePriceStore(state => state.facilityPricelist);
  const fetchPrices = usePriceStore(state => state.fetchPrices);

  useEffect(() => {
    fetchPrices();
  }, [fetchPrices]);

  return (
    // 原渲染逻辑不变
  );
}

其他组件使用：

import { usePriceStore } from "./priceStore";

function TargetComponent() {
  const facilityPricelist = usePriceStore(state => state.facilityPricelist);
  return <div>设施总数：{facilityPricelist.length}</div>;
}

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