記錄時參考串列顯示未定義

我已經為我在地圖中呈現的每個組件制作了一個參考串列，我正在為其中的一個按鈕分配一個參考，EditWebAppTypeForm并試圖在其中使用它，MappedAccordion但它顯示未定義？在將 ref 傳遞給組件之前，我該怎么做才能確保它已設定MappedAccordion？

登錄addtoRefs功能的資訊是正確的，它顯示-

(2) [button, button]

我已經洗掉了很多代碼，所以它更容易閱讀。

function Admin() {

  const allRefs = useRef([] as any);
  allRefs.current = [];

  const addtoRefs = (e: any) => {
    if (e && !allRefs?.current?.includes(e)) {
      allRefs?.current?.push(e);
    }
    console.log(allRefs.current); <-- Logs correct info
  };

  return (
    <div className="adminContainer">
      <Grid container spacing={2}>
        <Grid item md={8} xs={12} sm={12}>
          <div style={{ width: 725, paddingBottom: 150 }}>
            {webAppTypes &&
              webAppTypes.map((a: IWebAppType, index: number) => {
                return (
                  <>
                    <Accordion
                      key={a.id}
                      defaultExpanded={a.id === 0 ? true : false}
                    >
                      <AccordionDetails>
                          <EditWebAppTypeForm
                            key={a.name}
                            setWebAppTypes={setWebAppTypes}
                            IWebAppTypeModel={a}
                            ref={addtoRefs} // <-- returning ref to add to list
                          />
              
                        <MappedAccordion
                          waobj={a}
                          key={a.id}
                          setWebAppTypes={setWebAppTypes}
                          editRef={allRefs.current[index]} <-- using ref but showing undefined in MappedAccordion component
                        />
                      </AccordionDetails>
                    </Accordion>
                  </>
                );
              })}
          </div>
        </Grid>
      </Grid>
    </div>
  );
}

export default Admin;

EditWebAppTypeForm 組件 -

const EditWebAppTypeForm = (props: any, ref: any) => {
  return (
    <div className="editWebAppSContainer">
      <form onSubmit={handleSubmit(onSubmit)} id="edit-app-form">
        <button hidden={true} ref={ref} type="submit" /> // <-- Assiging ref to button
      </form>
    </div>
  );
};

export default forwardRef(EditWebAppTypeForm);

type MappedAccordionProps = {
  waobj: IWebAppType;
  setWebAppTypes: Dispatch<SetStateAction<IWebAppType[]>>;
  editRef: any;
};


function MappedAccordion({
  waobj,
  setWebAppTypes,
  editRef,
}: MappedAccordionProps) {
 

  const onSubmit = (data: FormFields) => {
    console.log(editRef); // <-- Logs undefined
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)} id="environment-form">
      </form>
    </div>
  );
}

export default MappedAccordion;

uj5u.com熱心網友回復：

我會像這樣創建一個額外的組件WebAppTypeAccordion：

function WebAppTypeAccordion({a, setWebAppTypes}) {
  const [formEl, setFormEl] = useState(null);

  function handleRef(el) {
    if (el) {
      setFormEl(el)
    }
  }

  return (
    <Accordion defaultExpanded={a.id === 0}>
      <AccordionDetails>
        <EditWebAppTypeForm
          setWebAppTypes={setWebAppTypes}
          IWebAppTypeModel={a}
          ref={handleRef}
        />
             
        <MappedAccordion
          waobj={a}
          setWebAppTypes={setWebAppTypes}
          editRef={formEl} 
       />
     </AccordionDetails>
   </Accordion>
  );
}

然后你可以更新Admin組件：

webAppTypes.map((a: IWebAppType) => (
  <WebAppTypeAccordion key={a.id] a={a} setWebAppTypes={setWebAppTypes} />
))

標籤：javascript 反应 打字稿

上一篇：型別錯誤：在構建專案時鍵入'(e:ChangeEvent<{value:string[]|unknown;}>)=>void'錯誤

下一篇：useEffect鉤子內部狀態變數的值不同（firestoreonSnapshot回呼）