主页 / 问题 / 1405415
Accepted
Alternant
Asked:2022-07-01 02:53:53 +0800 CST2022-07-01 02:53:53 +0800 CST

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

  • 772
const backUrl = "https://626d63f2e58c6fabe2d4dc9a.mockapi.io/items"

function Main() {
   const [items, setItems] = useState([])
    useEffect(() => {
      async function fetchItems() {
        const response = await fetch(backUrl);
        const data = await response.json();
        console.log("EffectUsed")
        setItems(data)
      }
      fetchItems()
    }, []);
}

同时，在渲染和重新渲染期间，钩子会触发 2 次。我不知道该怎么办了

reactjs

2 个回答

  1. StrictMode在 mode 中渲染组件两次，development但不在production. 根据开发人员的说法React- 这可以让您检测代码中的一些问题（如果有的话）并警告您

    更多细节在这里Обнаружение неожиданных побочных эффектов

    • 6
  2. Best Answer

    非常类似于一个反应错误。或者可能不是错误（来源）：

    Stricter Strict Mode：未来，React 将提供一个功能，让组件在卸载之间保留状态。为了做好准备，React 18 为严格模式引入了一个新的仅限开发的检查。React 将自动卸载并重新安装每个组件，每当一个组件第一次挂载时，在第二次挂载时恢复之前的状态。如果这破坏了您的应用程序，请考虑删除严格模式，直到您可以修复组件以恢复使用现有状态重新安装。

    createRoot如果使用旧渲染而不是新渲染render，则效果将按应有的方式调用 1 次。这适用于第 17 次和第 18 次反应，但第 18 次给出了旧渲染已过时的警告。

    const { StrictMode, useState, useEffect } = React
const { createRoot } = ReactDOM
const { log } = console

const rootElement = document.querySelector("main");
const root = createRoot(rootElement);

function App() {
  log("render")
  useState(() => log("useState"))
  useEffect(() => log("useEffect"), [])

  return <h1>Hi!</h1>
}

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
    <script crossorigin src="//unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="//unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<main></main>

    const { StrictMode, useState, useEffect } = React
const { render } = ReactDOM
const { log } = console

function App() {
  log("render")
  useState(() => log("useState"))
  useEffect(() => log("useEffect"), [])

  return <h1>Hi!</h1>
}

render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.querySelector("main")
);
    <script crossorigin src="//unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="//unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<main></main>

    在生产版本中，无论如何只会有一个调用（以及一个渲染）：

    const { StrictMode, useState, useEffect } = React
const { createRoot } = ReactDOM
const { log } = console

const rootElement = document.querySelector("main");
const root = createRoot(rootElement);

function App() {
  log("render")
  useState(() => log("useState"))
  useEffect(() => log("useEffect"), [])

  return <h1>Hi!</h1>
}

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
    <script crossorigin src="//unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<main></main>

    const { StrictMode, useState, useEffect } = React
const { render } = ReactDOM
const { log } = console

function App() {
  log("render")
  useState(() => log("useState"))
  useEffect(() => log("useEffect"), [])

  return <h1>Hi!</h1>
}

render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.querySelector("main")
);
    <script crossorigin src="//unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<main></main>

    • 4

相关问题