如何在挂载上使用 useRef

Question

我想在组件第一次挂载时使用 useEffect 挂钩中的 useRef，然后我想在用户单击时按下一个按钮加载除此之外的其他内容。我当前的实现出现错误，提示错误：对象作为 React 子项无效（找到：[object HTMLDivElement]）。这对我来说没有意义。这是我的代码。

import { useEffect, useState, useRef } from "react";
import { fetchData } from "./utils/fetchData";

export default function App() {

let previousEmail = useRef('');

const [email, setEmail] = useState('');

useEffect(() => {
  async function getEmail() {
    let title = await fetchData();
    console.log(title);
    previousEmail.current.textContent = title;

  }

   getEmail();
 }, [])

   const getRandomEmail = async () => {
   const emailAddress = await fetchData();
      setEmail(emailAddress)
   }


   return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <button onClick={getRandomEmail}>Button</button>
        <p>{email}</p>
        <label>Previous Email</label>
        <div ref={previousEmail}>{previousEmail.current}</div>
      </div>
     );
 }

这是我的 FetchData 方法的代码

 const fetchData = async () => {
   const response = await fetch('https://randomuser.me/api');
   const data = await response.json();
   const emailData = data.results[0].email;
   return emailData;
 }

export {
   fetchData
}

Answer 1

改变

<div ref={previousEmail}>{previousEmail.current}</div>

至

<div ref={previousEmail}></div>.

我假设您正在尝试将以前的电子邮件地址添加到 div，但您实际上是在添加对 div 的引用，这是一个不允许的对象。

Answer 2

参考并非用于此目的。如果你需要更新页面上的内容，那么你应该有一个状态值，当你设置状态时，组件会重新呈现。这是执行此操作的标准方法：

const [previousEmail, setPreviousEmail] = useState('');
const [email, setEmail] = useState('');

useEffect(() => {
  async function getEmail() {
    let title = await fetchData();
    setPreviousEmail(title);
  }

  getEmail();
}, [])

return (
  <div className="App">
    <h1>Hello CodeSandbox</h1>
    <button onClick={getRandomEmail}>Button</button>
    <p>{email}</p>
    <label>Previous Email</label>
    <div>{previousEmail}</div>
  </div>
)

如何在挂载上使用 useRef

How to use useRef on mount

reactjs

use-ref