[Q&A] TypescriptとReactで関数内の変数を別の関数で参照する方法を教えてください！！

TypescriptとReactで関数内の変数を別の関数で参照する方法を教えてください！！

解決したいこと

WhatFiledCmpの関数内に存在するresを別のファイルで参照したいです。
どのようにすればresを取得できるでしょうか？？

resが書かれているコード

const WhatFieldCmp: React.FC<ContainerProps> = (props) => {

  const handleRecordSelect = (itemlist: RecordEntity): void => {
    if (!whatObject) return;

    setRecord(itemlist);

    const [titleLookupShowField] = whatObject.lookupFields ?? [];
    const data = JSON.parse(itemlist.data);
    const res = data[`${titleLookupField.crmField?.name ?? 'Id'}`];
  };
};

resを使用したいコード

const WhoFieldCmp: React.FC<ContainerProps> = (props) => {
  const handleRecordSelect = (itemlist: RecordEntity): void => {
    if (!whoObject) return;

    setRecord(itemlist);

    const [titleLookupShowField] = whoObject.lookupFields ?? [];
    const data = JSON.parse(itemlist.data);
    const res = data[`${titleLookupField.crmField?.name ?? 'Id'}`];
  };
};

whoFieldCmp>handleRecordSelectでIF文にresを使用したいです。

自分で試したこと

export&import ・ setState ・ useRef
など試しましたができませんでした。
ご教授お願いします。

1Answer

@honey32 posted at 2024-07-23

Sender コンポーネント内のイベントハンドラ handleSendMessage で保存したデータを、Reader 内のイベントハンドラ handleReadAndShowMessage で読み出して利用する

という最小限の例を以下のように示してみました。 Sender とも Reader とも異なる store-mssage.ts というファイルを用意して、両者からそれを利用する形になっています。

store-message.ts

export const Store = {
  message: "",
}

sender.ts

import { Store } from "./store-message.ts"

export const Sender: FC<Props> = (props) => { 
  const handleSendMessage = () => {
    Store.message = "HELLO!"
  }

reader.ts

import { Store } from "./store-message.ts"

export const Reader: FC<Props> = (props) => {
  const handleReadAndShowMessage = () => {
    window.alert(Store.message);
  }

もし「イベントハンドラで読み出す」ではなく、コンポーネントが描画する内容に影響を与える場合には、ミュータブルなオブジェクトではなく、親コンポーネント内のステートで実装すべきです。

コールバック Props などを使った Lift State Up パターンです。

2Like

Comments

@daichiPon

Questioner

setRecodeがReactのuseStateを使用しているため、関数コンポーネントの内部で使用しないといけないみたいなのですが、どのようにすればいいのでしょうか？

どうぞよろしくお願いします。

ressでresを定義してwhoファイルで参照使用としました。

functionファイル

import React, { useState } from 'react';
import ObjectSettingEntity from '../entity/objectSettingEntity';
import RecordEntity from '../entity/recordEntity';

  const ress = (itemlist: RecordEntity): void => {
   const [whatObject, setWhatObject] = useState<ObjectSettingEntity | undefined>(undefined);
   const [record, setRecord] = useState<RecordEntity | undefined>(undefined);
　  const [records, setRecords] = useState<RecordEntity[] | undefined>(undefined);

    setRecord(itemlist);

    const [titleLookupShowField] = whatObject.lookupFields ?? [];
    const data = JSON.parse(itemlist.data);
    const res = data[`${titleLookupField.crmField?.name ?? 'Id'}`];
   const ress = res
  };

Whoファイル

const WhoFieldCmp: React.FC<ContainerProps> = (props) => {
  const handleRecordSelect = (itemlist: RecordEntity): void => {
    if (!whoObject) return;

    setRecord(itemlist);

    const [titleLookupShowField] = whoObject.lookupFields ?? [];
    const data = JSON.parse(itemlist.data);
    const res = data[`${titleLookupField.crmField?.name ?? 'Id'}`];
    console.log(ress);
  };
};