我想導出在 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

存儲概念將允許在整個應用程序中使用您的變量，而無需使用道具鑽孔。