我想导出在 React Js 中的 function 组件中声明的变量。 我怎样才能做到这一点？

Question

我正在创建反应应用程序。 我想导出 RoomPricelist1 和 FacilityPricelist1 变量。 我已经为我尝试过的 function 组件中的这些变量分配了值，但是在我想导出 RoomPricelist1 和 FacilityPricelist1 的另一个 function 组件中导入时显示未定义**
可能吗？

import React, { useEffect, useState } from "react";
import StudentService from "../../Services/StudentService";
import PriceChartHtml from "./PriceCharthtml";

var RoomPricelist1
var FacilityPricelist1

export function PriceChart() {
  const [RoomPricelist, setRoomPricelist] = useState([]);
  const [FacilityPricelist, setFacilityPricelist] = useState([]);

  RoomPricelist1 = RoomPricelist
  FacilityPricelist1 = FacilityPricelist

  useEffect(() => {
    
    StudentService.getroompriceList()
      .then((response) => {
        // console.log(response);
        if (response) {
            setRoomPricelist(response.data);
        }
      })
      .catch((err) => {
        console.log(err);
      });

    StudentService.getfacilitypriceList()
      .then((response) => {
        // console.log(response);
        if (response) {
            setFacilityPricelist(response.data);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  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) => {
            return <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) => {
            return <PriceChartHtml key={price.id} price={price} />;
          })}
        </tbody>
      </table>

    </>
  );
}

export const RoomPricelist = RoomPricelist1
export const FacilityPricelist = FacilityPricelist1

Answer 1

你不是在寻找这样的东西吗？

 export const RoomPricelist = async () => {
      try {
        const response = await StudentService.getroompriceList();
        const json = await response.json();
        console.log(json);
      }
      catch (e) {
        console.log('Error', e);
      }
    }

Answer 2

您在这里尝试做的是 React 应用程序的常见问题。 导出变量适用于常量，但在这里您希望将其绑定到 state 变量，该变量可能在运行时发生变化。

这个问题至少有两种解决方案：道具钻孔或使用商店。

道具钻探包括在组件模板中传递变量，如下所示：

...
return (
  <SomeComponent RoomPriceList1={RoomPriceList}
                 FacilityPriceList1={FacitilyPriceList}/>
);
...

在这里你得到了缺点：你不能在这个组件的 scope 之外使用它。

这个问题的最佳解决方案可能是创建一个“商店”。 创建商店有多种方法。 一个是 React 上下文： https://en.reactjs.org/docs/context.html

另一个广泛使用的“商店”是 React Redux，通常以这种方式实现：

...
<Provider store={store}>
  <App />
</Provider>
...

https://react-redux.js.org/introduction/getting-started

存储概念将允许在整个应用程序中使用您的变量，而无需使用道具钻孔。