为什么在这个React函数中有一个双重调用？
在这个React函数中有一个双重调用的原因是为了确保数据的正确渲染和更新。
在React中，组件的更新通常是由组件的状态（state）或属性（props）的改变触发的。当状态或属性发生改变时，React会重新渲染组件以反映这些改变。而在某些情况下，组件的更新可能会涉及到异步操作或依赖于其他组件的更新。
为了处理这种情况，通常会在组件的生命周期函数中进行异步操作或等待其他组件更新完成后再进行渲染。这就导致了在某个React函数中进行了双重调用的情况。
具体来说，双重调用的过程通常如下：
- 第一次调用：组件的生命周期函数（如
componentDidMount、componentDidUpdate等）会在组件首次渲染或更新时被调用。在这个函数中，可以进行异步操作（如发送网络请求、获取数据等），然后通过更新组件的状态或属性来触发第二次调用。 - 第二次调用：由于组件的状态或属性发生了改变，React会重新渲染组件。在重新渲染时，React会执行组件的渲染函数（如
render），生成组件的虚拟DOM（Virtual DOM），并将其与之前的虚拟DOM进行比较，最终更新真实的DOM。
通过这样的双重调用，可以确保在进行异步操作或依赖于其他组件更新的情况下，组件的渲染和更新都能够正常进行，从而保证数据的正确渲染和更新。
另外，需要注意的是，React的双重调用机制是由React框架自身提供和管理的，开发者通常无需直接控制或干预双重调用的过程。
这里提供腾讯云相关产品和产品介绍链接地址：
- 腾讯云函数（云函数计算）：https://cloud.tencent.com/product/scf
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发平台（Mobile）：https://cloud.tencent.com/product/mc
- 腾讯云数据库（DB）：https://cloud.tencent.com/product/cdb
- 腾讯云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链（Blockchain）：https://cloud.tencent.com/product/baas
- 腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod
相关·内容
2回答
我已经创建了一个类组件，如代码中所示。
index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import Home from "./components/home";
ReactDOM.render(
<React.StrictMode>
<Home /&
浏览 1提问于2020-05-10得票数 2
回答已采纳
这个React.Component类构造函数似乎在一个实例中运行了2次，方式很奇怪。
显然：
计数器被增量为0 -> 1，而没有console.log输出。
计数器被增量为1 -> 2和console.log输出。
这是真的吗？为什么控制台显示的是2而不是1？
import React from 'react';
var instanceCount = 0;
console.log('root:', instanceCount);
class App extends React.Component {
construct
浏览 4提问于2021-09-18得票数 2
回答已采纳
当我在setState中使用fetch时，函数会发出两个网络请求，但我希望有一个请求。
为什么会发生这种情况，以及如何预防？
import React from 'react';
class TestFetch extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(()
浏览 3提问于2021-07-08得票数 1
回答已采纳
1回答
我遇到了这个简单的组件，它呈现了四次，而我希望它最初呈现一次，执行useEffect，它更新状态，因此再次呈现。相反，控制台发送4个日志输出，表示它呈现了四次。是否知道为什么和任何资源的基本生命周期的反应功能组件？
const { useState, useEffect } = React;
function App() {
const [jobs, setJobs] = useState([]);
useEffect(() => setJobs(["test"]), []);
console.log("APP", jobs);
浏览 3提问于2020-04-10得票数 4
回答已采纳
我有一个简单的反应应用程序，其中包括一个websocket。现在我想知道为什么每次打开react应用程序时，websocket连接总是被打开两次。
经过一些调查，我发现它实际上是我的根组件'App‘，它是以某种方式两次构建的。我在我的index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker fro
浏览 3提问于2020-05-01得票数 0
回答已采纳
我这里有一个简单的代码
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [number, setNumber] = useState(0);
function chaneNumber() {
setNumber(state => state + 1);
}
console.log("here");
return (
<div classNa
浏览 1提问于2020-05-03得票数 13
回答已采纳
1回答
我面临多重重呈现问题，因此，为了找到问题，我注释了每一行代码，最后找到了导致重呈现的常量定义：
const MyComponent = () => {
console.log('render') // logs 4 times
const myRef = useRef(null)
return <h1>hello</h1>
}
const MyComponent = () => {
console.log('render') // logs 2 times
return <h1>hello&l
浏览 1提问于2020-06-10得票数 0
回答已采纳
2回答
我是新的反应，我试图开发一个简单的web应用程序，但我得到了一个错误。当我加载类组件时，我的构造函数会被调用两次，您能帮忙吗？
Home.js
import React from 'react'
import Land from "../Land";
function Home() {
return (
<div>
<h1>Home!</h1>
<Land/>
</div>
)
}
export de
浏览 3提问于2020-08-09得票数 0
回答已采纳
2回答
在FC组件中有以下代码：
我只想在组件挂载时调用Api并记录信息
对于空数组调用两次console.log，为设置相同值调用两次。
import * as React from"react";
import Header from"../components/Header";
import Search from"../components/Search";
import Categories from"../components/Categories";
import Carousel from"../component
浏览 2提问于2020-05-10得票数 10
回答已采纳
我在状态中添加了一个计时器变量，使其每秒钟改变一次，为什么它呈现为2,4,6，而不是1,2,3，..以及如何提升它？
import React, { Component } from 'react'
export class UseRefTimer extends Component {
interval
constructor(props) {
super(props)
this.state = {
timer:0
}
}
componentDidMount(){
this.interval = setInterv
浏览 1提问于2021-07-23得票数 0
回答已采纳
有人能给我解释一下造成这种情况的原因吗？
假设我有一个函数，它在初始呈现时生成一个随机值。然后，我使用ref分配结果，以便在后续组件更新后保持值不变。之后，我将ref值赋值给某个状态。状态由setTimeout中的ref值初始化。
import React, { useRef, useState } from "react";
import value from "./example";
function App(){
const v = useRef(word());
console.log(v.current); // Here for exa
浏览 1提问于2021-07-15得票数 1
回答已采纳
1回答
import React, { useState } from "react";
// import styles sheet:
import "./css/CommentBlock.css";
// import profile avatars:
import gamer from "./icons/gamer.png";
import man1 from "./icons/man (1).png";
import man from "./icons/man.png";
import user from &
浏览 4提问于2022-02-06得票数 -2
回答已采纳
1回答
在我的控制台中的本地主机上，我看到我的组件被呈现了两次，但不知道原因。我不会使用componentDidMount引入任何API，这只是一个基本的组件，里面什么都没有。这是意料之中吗？
当我调入API数据时，我在我的控制台中得到4次重新呈现，在使用componentDidMount更新状态时，我希望看到另一次重呈现。
我已经看到了很多与状态更新相关的线程，这些线程会导致重呈现，但无法找到任何覆盖这些基本内容的内容。
App.js
import React from "react";
import Testing from "./components/Body/Testi
浏览 3提问于2020-05-09得票数 0
回答已采纳
EDIT是由<React.StrictMode></React.StrictMode>在index.js引起的。我不知道为什么，但这很奇怪。
我注意到钩子useSelector()导致了应用程序的重新渲染不必要。这是意料之中吗？如果是，我应该使用redux-toolkit-js吗？
我还没有在Reacti原住民上测试这个行为，但是我认为Reactinative中的重新呈现将成为一个问题。
钩子useSelector使应用程序重呈现2倍以上，并且它会复合，这意味着如果没有Redux的应用将只重呈现2次，这是由状态更新引起的，只需调用useSelector()就会导致应用程
浏览 3提问于2020-09-22得票数 0
回答已采纳
在useEffect钩子中，效果(增加r值和日志值)按预期工作。
import React from "react";
let r = 0;
export default function App() {
const [state, setState] = React.useState(false);
function handler() {
setState(!state);
}
React.useEffect(() => {
r += 1;
console.log("rendering:-", r, &#
浏览 2提问于2021-06-08得票数 3
回答已采纳
6回答
构造函数被调用两次--反应性组件
、、、、
我的react组件的构造函数被调用了两次，但我不知道为什么。我正在使用react存储我的应用程序的语言。我有一个基于浏览器语言设置默认语言的函数。LoginPage是第一个获得呈现的组件，因此我在它的构造函数中调用了函数。基本上，它所做的是比较和分派一个动作。当我使用redux工具检查我的状态时，我发现它被分派了两次。我在构造函数中打印了虚拟数据，它也被打印了两次。
LoginPage.js
import React from 'react';
import {connect} from 'react-redux';
import {startLogin} fr
浏览 6提问于2017-12-05得票数 13
我是一个前沿发展和学习反应的新手。现在我正试着建立一个hello-world项目。
在执行npx create-react-app myapp之后，我得到了一个初始的React项目，并在文件App.js中进行了编码。
import React, {useState} from 'react';
var counter = 0;
function App() {
const [counter2, setCount] = useState(0);
const increment = () => {
setCount(counter2 + 1);
};
浏览 0提问于2020-12-28得票数 3
回答已采纳
在这里，，我只使用一个初始化函数调用useState：
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [data, setData] = useState(() => {
console.log('Getting initial state...');
return {};
});
return (
<div className="
浏览 3提问于2020-09-06得票数 2
回答已采纳
我的应用程序在一个严格的模式内，这使得我的useEffect()很难运行。它基本上在控制台中记录了我所有的值两次，这不是我想要达到的结果。
useEffect(() => {
console.log('logs some data')
}, []);
有一种方法可以让useEffect只显示一次数据，并将StrictMode保存在我的应用程序组件中？
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
我确实尝试过使用useRef方法，但是我的工作人员建议我不
浏览 2提问于2022-07-20得票数 1
我正在声明一个名为name的新变量，并使用useState将其初始化为Math.Random()，然后在两个位置记录变量，一次在组件的主体中，一次在组件的useEfect中。我看到的是变量在变化。
我的名字是0.1869175357793944，在渲染后我的名字是0.10608469707774937
我在这里做错什么了吗？我搞不懂它为什么会这样。
这是我的代码：
const {useState} = React;
const {useEffect} = React;
const Example = () => {
const [name, setName] = useStat
浏览 5提问于2022-01-28得票数 2
回答已采纳
我正在运行一个React前端应用程序，它检查用户当前是否登录到Rails API中。我使用componentDidMount检查然后相应地设置状态，但是当页面第一次加载并且用户登录时，所需的信息在页面上闪烁，然后应用程序呈现，状态回到初始状态。
这是我的代码：
import React, { Component } from "react";
import { Routes, Route } from "react-router-dom";
import Dashboard from "./Dashboard";
import Home from
浏览 1提问于2022-05-24得票数 0
回答已采纳
1回答
因此，我开始了这个新项目的创建-反应-应用程序(它运行的Reactiv.16.13.1)。我将基本App组件重写为一个类，发现当组件是一个函数时，如下所示：
function App() {
console.log('App (function)');
return 'App (function)';
}
浏览器控制台打印出
App (function)
太好了，谢谢！但是，如果相同的App组件编写为
class App extends React.Component {
render() {
console.log('App (cl
浏览 0提问于2020-04-02得票数 8
回答已采纳
我在我的反应申请中面临着这个问题。
TypeError:无法读取未定义(读取'requestContent')的属性
在我的应用程序中，我正在使用commercejs。代码指向isEmpty=!cart.line_items.length;.当选中它时，它会显示适当的值。此外，我注意到Api两次返回空数组，第三次返回填充数组。为什么会这样呢？有人来帮我解决这个问题吗？
Cart.jsx
import React from "react";
import { Container, Typography, Button, Grid } from "@mate
浏览 4提问于2021-09-23得票数 3
回答已采纳
我看到已经有关于这个问题的线索，但它们大多已经死了，或者无论如何，没有任何真正的解决办法。
我正在实现一个react和typescript客户端，在其中我安装了oidc-client模块，以便能够与外部identityserver4服务通信。实际上，流程似乎在工作，登录和注销在正确的重定向下工作得很好。我注意到的唯一一点是，当我登录并被重定向到完成登录(/signin-callback)的页面时，这个错误会被触发片刻，但是在下一个呈现时，它会将我重定向到用户正确登录的主页。这是一个错误：
我发送给idp的配置
public static config: UserManager
浏览 11提问于2022-09-23得票数 0
使用npx create-react-app reactTwice，我创建了一个基本的React应用程序，除了在控制台中记录某些操作之外，它什么也不做。这表明主类App被实例化了两次，并且它的render方法被调用了两次，即使this.state和this.props的值没有改变。
我想知道为什么会发生这种情况。也许有一种方法可以避免它，也许发生这种情况有一个特定的原因，我需要接受。
您可以找到此的存储库。(请注意，当类似的代码在jsFiddle之类的站点上运行时，不会发生这种行为)。
下面是启动应用程序的index.js脚本：
import React from 'react'
浏览 1提问于2020-09-16得票数 0
我想根据这个函数改变一个对象的位置：
描述我想要的位置的函数称为erf - error函数.事实证明斯威夫特在它的库中有erf功能，但我不知道如何使用它。
它说:含糊不清地使用erf
浏览 1提问于2016-07-13得票数 1
回答已采纳
老实说，除了“这里发生了什么事”之外，我还在努力想出一个表达这个问题的方法。使用以下用于将增量项添加到列表中的响应代码：
import React, { useState } from "react";
import "./styles.css";
let counter = 0;
export default function App() {
const [list, setList] = useState([]);
console.info("Render:", counter, list.join());
return
浏览 8提问于2021-10-20得票数 0
回答已采纳
我有以下反应成分：
App.tsx:
function App() {
const [countdownTimers, setCountdownTimers] = React.useState<
Map<number, number>
>(new Map([[1, 60]]));
useEffect(() => {
const timeoutId = setInterval(() => {
setCountdownTimers((prevState) => {
浏览 20提问于2022-11-26得票数 1
回答已采纳
1回答
当我向useEffect()添加更多的调度时，它会导致以下所有内容触发两次。下面的例子。
这是完整的代码。按任何其他顺序删除注释
ps。如何将其作为代码片段运行？
pps。我以为例
import React, { useReducer, useEffect } from "react";
const url = `https://picsum.photos/v2/list?page=3&limit=1`;
function reducer(data, action) {
console.log('reducer triggered', actio
浏览 0提问于2020-05-14得票数 1
回答已采纳
我是个新手，我一直在尝试为管理页面创建一条私人路由。 对于我的路由器，这是我的代码： <React.Fragment>
<Switch>
<Route path='/' component={Home} exact>
<Home />
</Route>
<Route path='/data' component={Data}>
<Data />
</Route>
<ProtectedRoute
浏览 15提问于2020-05-03得票数 0
我想我漏掉了什么。
我有一个简单的柱状图。在图表配置中有以下内容：
exporting: {
enabled: false
},
在图表上，有一个小下拉列表，允许我以PDF格式下载图表。当我在Firefox中这样做时，有一个弹出式窗口显示了PDF文件的名称并从导出
我的Firefox中有Firebug，我无法在Firebug控制台中看到任何对export.highcharts.com的远程调用。为什么我看不到任何远程呼叫跟踪？我知道我一定错过了什么，谢谢你让我知道这是什么。
致以问候。
浏览 1提问于2014-09-28得票数 0
回答已采纳
我不确定这是否是预期的行为，但如果您在使用钩子时跳出调度( useReducer )，则如果该操作后面跟着呈现，则该操作会发生两次。让我解释一下：
// bailing out to prevent re-rendering
const testReducer = (state, action) => {
switch (action.type) {
case "ADD":
state.test += 1
return state;
}
};
const myComponent = () => {
let [totalC
浏览 6提问于2020-05-04得票数 3
回答已采纳
1回答
假设我们有一个简单的结构，在hpp文件中有一个唯一的指针： struct SomeType
{
SomeType() = default;
~SomeType();
std::unique_ptr<int> ptr;
}; 在cpp中，我们有： SomeType::~SomeType()
{
ptr.reset();
} 这个析构函数是有用的还是多余的？有没有可能出现双重删除或其他对内存/堆的不良副作用？
浏览 30提问于2020-11-03得票数 1
回答已采纳
2回答
我在一个调用struts2操作的jsp中有这个函数。但它会调用它两次。为什么？
JSP
$("#inputField").change(function()
{
var inputField= $("#inputField").val();
if(inputField !== '')
{
var url = 'myUrl';
$.getJSON(url, function(retVal)
{
浏览 0提问于2012-08-28得票数 0
3回答
考虑一下规范的useState示例：
import React, { useState } from 'react';
const MyComponent = () => {
const [count, setCount] = useState(0);
console.log(count);
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
count
浏览 10提问于2020-04-06得票数 8
回答已采纳
我已经开始学习React，我无法理解为什么console.log日志记录是两次。下面是我的代码，当我用铬检查它时，它会显示单词“随机文本”两次而不是一次。
import React, { Component } from "react";
class Counter extends Component {
state = {
count: 0
};
render() {
console.log('random-text');
return (
<div>
<span c
浏览 7提问于2020-06-04得票数 16
回答已采纳
1回答
我正在查看源代码附带的redux示例，其中有一些我以前从未见过的JavaScript表示法。我熟悉ES6 export语法，但不知道这个代码段末尾的导出语句在做什么。为什么App类与connect函数的结果相结合？
import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import Header from '../componen
浏览 2提问于2016-04-12得票数 4
回答已采纳
2回答
这是在React JS中的教程之后。
class Square extends React.Component {
render() {
return (
<button
className="square"
onClick={() => this.props.onClick()}
>
{this.props.value}
</button>
);
}
}
funct
浏览 1提问于2019-04-28得票数 0
4回答
我正在学习React，但是我无法理解为什么我在控制台中得到了这个输出。心地善良的人可以详细解释一下“行刑”哦，这些钩子？
import { useState, useEffect } from "react";
function Homepage() {
const [state, setState] = useState();
useEffect(() => {
console.log("useEffect");
console.log("useEffect not executed");
setState
浏览 24提问于2022-04-20得票数 1
2回答
我在react-hook-form中使用自定义react-hook-form，当我将文本输入到输入中(因此满足required条件)时，无法使formState.isValid成为true。
下面是一个示例代码：
interface FormValues {
readonly value: string;
}
export default function App() {
console.log("rendering");
const form: UseFormMethods<FormValues> = useForm<FormValues&g
浏览 4提问于2020-06-23得票数 19
我学习了React并拥有了这个
正如你在PromiseLoader.js中所看到的
return在useEffect中有一个永不确定的console.log(..，这是为什么？我以为JavaScript setInterval是异步的？
浏览 2提问于2021-04-12得票数 0
回答已采纳
在学习的过程中，反应和建立一个简单的数字猜测游戏的目的是为了练习。
在我的代码中，我有一个名为“Game”的组件，其名称为“console= Math.floor(Math.random() * 10 +1)”，它在1-10之间滚动一个随机数，并通过console.log验证滚动，这样我就可以看到控制台上显示的数字。
然后在返回语句中使用{roll}，该语句稍后在App.js文件上实例化(App.js未显示在下面)
唯一的一点是，在使用console.log(roll)时滚动的随机数与在我的返回语句'The number is {roll}‘中在屏幕上呈现的数字不同
为什么会这样呢？我
浏览 12提问于2021-12-12得票数 1
回答已采纳
简单地用observer()包装反应组件似乎会使它们呈现两次。可能的原因是什么？我正在运行react 16.8.3，mobx 5.9.4和mobx-reacti-lit1.2.0的最新版本。
例如：
import React from "react";
import { observer } from "mobx-react-lite";
const Item = observer(() => {
return (
<div>
{console.log("render item")}
Ite
浏览 1提问于2019-03-30得票数 5
回答已采纳
我发现了一种行为，在这种情况下，生成器似乎被调用了两次。
下面是一个简单的代码，它从生成器获取一个数字并输出到控制台。它期望0和1被输出到控制台，但实际上它输出0和2。
import { useState, useEffect } from "react";
function* counter() {
let val = 0;
while (true) yield val++;
}
const count = counter();
function App() {
console.log("rendered: count = ", count.
浏览 4提问于2021-05-26得票数 3
回答已采纳
3回答
子组件构造函数被多次调用
、、、、
我有一个父组件，它是一个包含标题HeaderComponent的平面列表。这个HeaderComponent是我创建的一个自定义组件，它包含自己的两个子组件。每当我刷新列表时，我都会将一个布尔值作为参数传递给HeaderComponent，然后传递给它自己的子元素，这样我就可以检查每个组件是否需要获取新数据。问题是，每当父组件刷新并设置新状态时，每次都会调用子组件的构造函数。构造函数不应该只在第一次父级初始化时调用，然后所有后续调用都涉及到调用子对象的shouldComponentUpdate方法，以查看它是否需要更新。
父组件
_renderHeader = () => {
r
浏览 2提问于2018-03-10得票数 8
我使用的是react 16.13.1，使用3.4.1创建了react应用程序。
正在为每个组件调用两次安装生命周期。
我创建了组件FirstComponent.js
import React, {Component} from 'react';
class FirstComponent extends Component {
constructor(p) {
super(p);
console.log("FirstComponent constructor called")
}
componentDid
浏览 4提问于2020-04-14得票数 1
回答已采纳
1回答
我试图从输入的API中获取数据。在提供输入并调用数据之后，我将从相同的数据中获得两个获取调用。以下是输入代码：
const [countryName, setCountryName] = useState<string>("");
const handleInputChange = (event: {
target: { value: React.SetStateAction<string> };
}) => {
setCountryName(event.target.value);
};
const onS
浏览 3提问于2022-04-28得票数 1
回答已采纳
首先，我需要说的是，我对java script和react .So是个新手，我需要详细说明下面的代码。
<ul>
{ this.state.tags.map(tag=>{
return <li key={tag}>{tag}</li>}
)}
</ul>
在我react应用程序中，我有一个名为tags的数组，这里我尝试将数组元素映射到某个html元素(list元素)，因此期望的输出是存在的，但我需要知道map函数是如何执行的，直到代码中有return语句的最后一个元素。
我的意思是，如果你
浏览 6提问于2020-04-02得票数 1
1回答
加载数据时获取多个svg元素D3
、、、、
我试图在包装器svg中创建一个矩形svg，但不知何故，我得到了两个或多个svg包装div。我猜想，一个是在数据不可用时创建的，另一个是在数据加载时useEffect刷新组件时创建的，但我可能错了。我不知道为什么会发生这样的事情，可能是一个愚蠢的错误或逻辑上的错误，我在学习D3方面是新手，所以请原谅我，并指导我。请帮帮忙。下面是密码。谢谢
import React, { useState, useEffect } from 'react';
import * as d3 from 'd3';
const LineChart = () => {
cons
浏览 11提问于2022-06-13得票数 0
我知道错误了
错误:无效钩子调用。钩子只能在函数组件的主体内调用。
您可能有React的不匹配版本和呈现器(例如React )，您可能正在违反Hooks的规则，您可能在同一个应用程序中有多个React副本。
但我不明白。我在整个应用程序中使用useSelector()，没有任何问题。当在这个组件中使用它时，它会崩溃。为什么会这样呢？
import { useSelector } from "react-redux";
const DrawerContent = (props) => {
const someVar = useSelector((state) =&g
浏览 4提问于2021-03-26得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
