Javascript 如何在useEffect中使用挂钩？

我在这里写了一个演示：

import React, { useRef, useEffect, useState } from "react";
import "./style.css";

export default function App() {
  // let arrRef = [useRef(), useRef()];

  let _data = [
    {
      title: A,
      ref: null
    },
    {
      title: B,
      ref: null
    }
  ];

  const [data, setData] = useState(null);

  useEffect(() => {
    getDataFromServer();
  }, []);

  const getDataFromServer = () => {

    //assume we get data from server

    let dataFromServer = _data;
    dataFromServer.forEach((e, i) => {
      e.ref = useRef(null)
    });
  };

  return (
    <div>
  {
//will trigger some function in child component by ref
    data.map((e)=>(<div title={e.title} ref={e.ref}/>))

  }
    </div>
  );
}

import React，{useRef，useffect，useState}来自“React”；
导入“/style.css”；
导出默认函数App（）{
//设arrRef=[useRef（），useRef（）]；
设_数据=[
{
标题：A，
ref:null
},
{
标题：B，
ref:null
}
];
const[data，setData]=useState（null）；
useffect（（）=>{
getDataFromServer（）；
}, []);
const getDataFromServer=（）=>{
//假设我们从服务器获取数据
让dataFromServer=\u数据；
dataFromServer.forEach（（e，i）=>{
e、 ref=useRef（空）
});
};
返回(
{
//将通过ref触发子组件中的某些函数
data.map（（e）=>（））
}
);
}

我需要在从服务器获得一些数据后进行预处理，以给它们一个ref属性。错误表示“只能在函数组件的主体内部调用挂钩”。所以我检查了文档，它说我不能在句柄或useEffect中使用钩子。那么，有没有办法实现我所需要的呢

更新：

---

我需要基于DB数据创建组件，所以当我创建一个组件时，我需要给它们一个ref，我需要从它们的父组件中触发一些在子组件中编写的函数，我使用ref来实现这一点。这就是为什么我需要将ref传递给子组件。

我认为主要问题是在

forEach

回调中调用

useRef

。为了使钩子工作，必须以相同的顺序调用相同的钩子，如果在循环中运行钩子，则不会给出相同的顺序（因为循环条件可能在渲染之间发生变化）。你为什么这么做？也许如果我们知道您想要实现什么，我们可以建议另一种方法。您好@FelixKling我在我的问题副本中添加我需要ref的原因-您正在尝试访问父级中的子组件函数。这是否回答了您的问题@SeanW我正在做的是使用forwardRef和UseImperialiveHandle。问题是我需要动态地给出ref，所以我不能预先在组件体中定义useRef（）。