记录时 ref 列表显示未定义

Question

我已经为在地图中呈现的每个组件制作了一个 refs 列表，我正在为 EditWebAppTypeForm 中的按钮分配一个 ref，并试图在 [=15] 中使用它=] 但它显示未定义？在将 ref 传递到 MappedAccordion 组件之前，我该怎么做才能确保已设置 ref？

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;

Answer 1

我会像这样创建一个额外的组件 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} />
))

记录时 ref 列表显示未定义

list of ref shows undefined when logging

javascript

typescript

reactjs