如何在 useEffect 中有条件地获取

Question

每次重新渲染时我都能获取新的报价，但现在我想添加一个功能，如果我按下重播报价按钮，我可以选择重播相同的报价而不是获取新报价，但我仍然想调用useEffect。 这个问题的解决方案听起来非常简单，但是，我不知道如何在游戏中使用 useEffect 来解决它。

此外，在使用 React 时，使用 ref 钩子而不是 document.getElementByID 更好吗？

代码沙盒链接

import "./styles.css";
import { useEffect, useState } from "react";

async function newQuote() {
  const response = await fetch("https://api.quotable.io/random");
  const data = await response.json();

  return data.content;
}

async function genQuote() {
  document.getElementById("quoteDisplay").innerText = await newQuote();
}

export default function App() {
  const [quote, fecthNewQuote] = useState(0);

  useEffect(() => {
    genQuote();

    document.getElementById(
      "newQuoteCounter"
    ).innerText = `New Quote Counter: ${quote}`;

    document.getElementById("quoteReplayedCounter").innertext = ``;
  }, [quote]);

  console.log();

  return (
    <div className="App">
      <div id="quoteDisplay"></div>
      <div id="newQuoteCounter">New Quote Counter: 0</div>
      <div id="quoteReplayedCounter"> Quote Replayed Counter: 0 </div>
      <button id="newQuoteButton" onClick={() => fecthNewQuote((c) => c + 1)}>
        Fetch New Quote
      </button>
      <button id="keepSameQuote">Keep Same Quote</button>
    </div>
  );
}

Answer 1

您可以在useEffect中使用 async function 进行重构，而无需使用此类document.getElementById("quoteDisplay").innerText js 解决方案。 你可以用反应状态来做到这一点。

这是工作示例https://codesandbox.io/embed/distracted-shamir-sfinbd?fontsize=14&hidenavigation=1&theme=dark

import "./styles.css";
import { useEffect, useState } from "react";

export default function App() {
  const [quote, fecthNewQuote] = useState(0);
  const [display, setDisplay] = useState("");

  useEffect(() => {
    async function newQuote() {
      const response = await fetch("https://api.quotable.io/random");
      const data = await response.json();
      setDisplay(data.content);
    }
    newQuote();
  }, [quote]);

  console.log();

  return (
    <div className="App">
      <div id="quoteDisplay">{display}</div>
      <div id="newQuoteCounter">New Quote Counter: {quote}</div>
      <div id="quoteReplayedCounter"> Quote Replayed Counter: 0 </div>
      <button id="newQuoteButton" onClick={() => fecthNewQuote(quote + 1)}>
        Fetch New Quote
      </button>
      <button id="keepSameQuote">Keep Same Quote</button>
    </div>
  );
}