相关疑难解决方法(0)

有一个用于从JavaScript发出请求的新API:fetch().是否有任何内置机制可以在飞行中取消这些请求？

我有一个计数器和一个console.log()来useEffect记录我状态中的每个变化，但是useEffect在挂载时被调用两次。我正在使用 React 18。这是我项目的CodeSandbox和以下代码：

import  { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(5);

  useEffect(() => {
    console.log("rendered", count);
  }, [count]);

  return (
    <div>
      <h1> Counter </h1>
      <div> {count} </div>
      <button onClick={() => setCount(count + 1)}> click to increase </button>
    </div>
  );
};

export default Counter;

我正在使用JavaScript和Union平台我将如何诊断这个问题？非常感谢.

我的 React 组件渲染了两次。所以，我决定逐行调试，问题就在这里

 if ( workInProgress.mode & StrictMode) {
        instance.render();
      }

React-dom.development.js

是因为严格模式吗？我可以禁用它吗？什么是严格模式？我需要吗？

import { useContext, useEffect, useState } from 'react';

const Log =  ()  =>  {
    useEffect(()  => {
        console.log('Running ...')
    },[])

    return(<p>here</p>)

}

export default Log;

每当此代码运行时，我都会 在浏览器控制台中收到两次正在运行...消息。

我认为它应该运行一次，因为我在 useEffect 中有一个空的第二个参数。

谁能解释一下为什么它运行两次？

我知道为什么会发生这种情况，但想知道避免这种情况的正确方法是什么。\nuseEffect 被调用两次。一个是 data = null，然后是“真实”数据。

const [data, setData] = useState(null);\nsomeServiceToFetchData.then(freshData => setData(freshData))\n\nuseEffect(() => {\n    console.log("useEffect called");\n}, [data]);\n

我应该到处做这样的事情吗？

useEffect(() => {\n    if (data) {\n        console.log("useEffect called with real data");\n    }\n}, [data]);\n