Question

我在这里写了一个演示：

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>
  );
}

我需要在从服务器获取一些数据后进行预处理，以便为它们提供 ref 属性。错误说 'Hooks can only be called inside the body of a function component' 。所以我检查了文档，它说我不能在句柄或 useEffect 中使用钩子。那么有没有办法实现我所需要的？

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

如何在 useEffect 中使用 Hooks？

0 个答案: