使用钩子的ag-grid react会导致在某些环境中重新挂载组件
。这是因为在React中，组件的重新挂载会导致组件的生命周期方法被调用，包括钩子函数。而ag-grid react库中的钩子函数可能会触发组件的重新挂载，从而导致无限循环的问题。
为了解决这个问题，可以尝试以下几种方法：
- 使用useEffect钩子函数的依赖项数组：在使用钩子函数时，可以通过传递一个依赖项数组给useEffect函数，来控制钩子函数的触发时机。通过指定正确的依赖项，可以避免不必要的重新挂载。例如：
useEffect(() => {
// 钩子函数的逻辑代码
}, [dependency1, dependency2]);- 使用memo包裹组件：可以使用React的memo函数来包裹组件，以避免不必要的重新渲染。memo函数会对组件的props进行浅比较，只有当props发生变化时才会重新渲染组件。例如：
const MemoizedComponent = React.memo(Component);- 检查钩子函数的触发条件：可以仔细检查钩子函数的触发条件，确保它们只在必要的情况下被调用。例如，可以使用条件语句或者逻辑运算符来控制钩子函数的触发时机。
总结起来，使用钩子的ag-grid react可能会导致在某些环境中重新挂载组件的问题。为了解决这个问题，可以使用useEffect钩子函数的依赖项数组、memo包裹组件或者检查钩子函数的触发条件。这些方法可以帮助我们避免不必要的重新挂载，提高应用程序的性能和稳定性。
关于ag-grid react的更多信息和相关产品介绍，您可以参考腾讯云的官方文档：ag-grid react官方文档。
相关·内容
当我在useEffect中使用useDispatch时，它会不断地重新加载整个组件 这是我的行为： export const getData = () => dispatch => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((json) =>
json.map((obj) => ({
...obj,
bonu
浏览 47提问于2020-04-12得票数 0
import React, { useState } from "react";
import Avatar from "@material-ui/core/Avatar";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import FormCon
浏览 35提问于2019-12-28得票数 0
回答已采纳
我是react.js钩子的新手。不知道为什么下面的代码不能工作。
import React,{useEffect,useState} from "react"
function App() {
const [fruit,setFruit] = useState("orange");
setFruit("apple")
return (
<div>
<h1>{fruit}</h1>
</div>
);
}
export default
浏览 0提问于2021-02-17得票数 0
回答已采纳
2回答
我目前正在构建一个与TypeScript反应的web应用程序。我正在尝试获取一个定制的API。然而，他们中的许多人正在回归。在将它们存储在状态后，如何访问整个API来对它们进行过滤？
import React, { useEffect, useState } from "react";
import axios from "axios";
interface Invoice {
id: number;
customer_id: number;
customer_name: string;
date: string;
total_invoic
浏览 2提问于2021-06-29得票数 1
回答已采纳
有这样一个简单的反应应用程序：
import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
console.log("App")
const [inputValue, setInputValue] = useState(0);
return (
<>
<input
浏览 5提问于2022-05-05得票数 1
2回答
我不知道为什么console.log()在运行我的应用程序时会执行两次？
import React, { useState } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import SearchBar from '../components/SearchBar';
import useResults from '../hooks/useResults';
import ResultsList from '
浏览 6提问于2021-10-03得票数 0
回答已采纳
1回答
在Piano组件中，我使用钩子(useWindowDimensions())获取窗口的尺寸。在useEffect中，每当窗口宽度发生变化时，我都希望呈现组件。
每次宽度发生变化时，它都会重新呈现组件(因为keyData依赖于它，并且它在dependencyList中)，但是没有在初始呈现中呈现。所以组件在我调整窗口的大小之前不会呈现。
下面的代码是Piano组件。
const svgRef = React.useRef(null);
const svgEl = d3.select(svgRef.current);
const { width } = useWindowDimensions()
浏览 4提问于2021-10-01得票数 0
回答已采纳
我有一个基本上是包含多个步骤的表单向导。向导分为两个部分:标签和内容。当内容组件更改其内部状态时(从incomplete更改为error或其他什么的)，我希望向导更新标签。我遇到的问题是从contents组件中获取状态，试图将状态保存到wizard组件中，以便更新labels，从而导致无限循环。
虽然我理解这个问题，但我并不真正知道如何解决它。这是一个非常小的例子，我的实际组件使用一些高级特性(如cloneElement )将道具传递给用户组件，而不必担心设置10个不同的道具。到目前为止，这是完美无缺的。
因此，我知道每次更新我的主组件状态时，它都会重新呈现子组件，这将永远调用相同的set状态
浏览 6提问于2022-01-05得票数 0
回答已采纳
1回答
一个组件显示了一个值列表，我试图隐藏关于这些值是如何得到的所有信息，基本上是将状态的关注从组件本身中分离出来，这样在将来获取API数据的任何更改、使用什么存储等等都不会影响组件。
首先，这到底是一个好主意，还是应该在组件中直接处理挂载/卸载操作？
第二，如果这是一个很好的方法，我的实现如何？我在JS感觉很舒服，但不是专家
ContentList.js：
import React from 'react'
import './ContentList.css'
import { ContentCardContainer } from '../Conten
浏览 0提问于2020-12-04得票数 1
回答已采纳
我在我的function应用程序中创建了这个函数来获取一个url并检查状态。
import { useEffect, useState } from 'react';
const fetchStatusCode = (url: string) => {
const [data, setData] = useState<string | null>(null);
useEffect(() => {
const fetchStatus = async () => {
const response = await fetc
浏览 5提问于2022-11-02得票数 -2
面对太多的重新呈现。React限制呈现的数量，以防止异步无状态组件中的中的无限循环。
我试图使用无状态组件调用异步方法。我试图在异步存储中调用一个API。
基本上，我需要从Asyncstorage获得电子邮件，并将该链接传递到API中。我正在尝试这样做，但面对太多的重新渲染，会出现错误。限制呈现的次数以防止无限循环。
import { BottomNavigation, Text } from 'react-native-paper';
import HomeScreen from './Home';
import PatientScreen from '
浏览 3提问于2021-06-27得票数 1
回答已采纳
我只是在ReactJs中创建了一个简单的组件，并使用axios调用了一个api，但是我在浏览器网络选项卡中注意到，我的api在第一次呈现中调用了两次，我还用控制台日志进行了测试，它也返回了两次！为什么？我在谷歌上搜索，人们说这是正常的功能组件和正常行为，但我不想请求api两次！知道吗？
import React, { useEffect, useState } from "react";
export default function User() {
useEffect(() => {
getUser().then(); // it call api tw
浏览 6提问于2022-07-10得票数 0
我刚刚在我的网站上实现了一个全球搜索，我开始有问题的反应-路由器。如果url更改参数，则不更新视图。
例如，从/users/454545导航到/teams/555555就像预期的那样工作。但是，从/teams/111111导航到teams/222222会更改url，但组件仍然是/teams/111111。
这是我的搜索输入字段的代码。
const SearchResult = ({ id, url, selectResult, text, type }) => (
<Row key={id} onClick={() => selectResult(url)} widt
浏览 5提问于2020-07-10得票数 3
回答已采纳
编辑：
发生错误是因为我将数组作为第二个参数传递给useEffect。即使数组中的值保持不变，引用也不断变化，因此useEffect不断被调用，并且重置了我的复选框值。该数组是由一个useState调用创建的。我将useState替换为useReducer (还原器只在对象实际更改时更改对象引用)，并更新了组件树上方缺少的一些依赖项。
原始问题：
在功能组件中更新状态有困难。
我的问题有点类似于这个问题：
我已经在复制我的状态对象(通过使用array.filter)，而不是引用它；但是我的状态仍然没有更新。
为了追踪这个问题，我尝试在一个最小的例子中重新创建这个问题：
但在我最小的例子中，一
浏览 0提问于2019-10-04得票数 3
回答已采纳
请看控制台上打印的时间。
setInterval()看起来像是在间隔内被调用了两次。
我在下面附上了我的代码。如果你能给我一个解决方案的线索，我将不胜感激。
import React, {useState} from 'react';
import AppRouter from './Router';
import {authService} from '../fbase';
function App() {
console.log('App()');
const [isLoggedIn, setIsLoggedIn]
浏览 0提问于2021-10-15得票数 0
我第一次用钩子测试了防火墙，并遇到了众所周知的无限循环问题。
我知道还有很多其他的问题可能与这个问题很接近，但我仍然无法在这种情况下回避这个问题。
在这里，App.js上的代码：
import React, { useState, useEffect } from 'react';
import { auth, createUserProfileDocument } from './firebase/firebase.utils';
function App() {
const [user, setUser] = useState(null);
us
浏览 1提问于2020-06-09得票数 2
回答已采纳
我正在使用Opentok React Native开发视频聊天+文本聊天功能，我在使用同一会话进行视频聊天和文本聊天时左右为难 https://github.com/opentok/opentok-react-native/ 我们可以使用相同的会话还是单独的会话？另外，我们如何创建同一会话的实例并将其重用于发布者/订阅者
浏览 17提问于2019-08-27得票数 0
2回答
切换到react钩子并第一次使用它们。我的状态似乎总是被设置回传递给它的初始值(0)。代码是让页面自动上下滚动。该页面只是练习显示各种文件类型。发生的情况是，scrollDir变量将切换为设置为1或-1和0。因此，控制台将显示1，0，1，0，1，0等...如何使状态在更新期间保持不变？ function App(props) {
const [scrollDir, setScrollDir] = useState(0);
function scrollDown() {
if(document.documentElement.scrollTop < 10)
{
浏览 85提问于2019-05-08得票数 1
回答已采纳
3回答
我有一个简单的程序，它从节点后端接收一些JSON数据，并将接收到的数据设置为状态。问题是，它重置状态无限次，创建无限渲染。
以下是JSON数据
[
{
"id": 1,
"name": "Product 1",
"category": "C1",
"price": "100"
},
{
"id": 2,
"name": "Product 2",
"categor
浏览 0提问于2021-03-14得票数 3
回答已采纳
期望的
我想查询中的数据，以便在应用程序中显示。
FDC：
问题
当尝试使用setState记录从FDC食品数据库检索到的数据时，会有一个无限循环。
这是我目前的代码。
import React, { useState } from 'react';
import {
Text,
View,
} from 'react-native';
export default function App() {
const [data, setData] = useState([]);
const getRecipes = async() =>
浏览 5提问于2020-07-07得票数 0
回答已采纳
类组件
在React类组件中，我们被告知setState 总是会导致重呈现，而不管状态是否实际更改为新值。实际上，组件将在状态更新到之前相同的值时重新呈现。
除非setState()返回false，否则shouldComponentUpdate()总是会导致重呈现。
钩子(功能组件)
但是，使用钩子，文档指定将状态更新为与前一个状态相同的值，not将导致(子组件的)重呈现：
退出状态更新
如果您将状态挂钩更新为与当前状态相同的值，则React将在不呈现子状态或触发效果的情况下退出。(React使用Object.is比较算法。)
密切相关的问题
类组件中的this.s
浏览 0提问于2019-03-27得票数 35
回答已采纳
我收到这样的警告：
无法对未挂载的组件执行反应状态更新。这是禁止行动.
它产生于一个child component，我不知道如何让它消失。
请注意，我已经阅读了许多关于为什么会发生这种情况的其他文章，并理解了基本问题。然而，大多数解决方案建议取消componentWillUnmount样式函数中的订阅(我使用的是react hooks)
我不知道这是否指向了我对反应的更大的基本误解，
但实际上我所拥有的是：
import React, { useEffect, useRef } from 'react';
import Picker from 'emoji-picke
浏览 2提问于2020-03-31得票数 0
回答已采纳
3回答
我把我的应用程序降到了最低限度，试图理解为什么它是无限的looping...but，我不明白。 const App = () => {
console.log("just logging that the app ran!")
const [data, setData] = useState('initial state');
const getAsset = async () => {
console.log("logging that getAsset ran!")
setData(
浏览 46提问于2021-08-12得票数 0
回答已采纳
我试着用下面的代码一次只执行urql useQuery。但由于某些原因，每次重新渲染时都会调用它。 根据文档https://formidable.com/open-source/urql/docs/basics/queries/#pausing-usequery，这个查询最初应该在渲染时暂停，并且只有在挂载时从React.useEffect调用时才会执行。 const [{ fetching, data, error }, reExecute] = useQuery({
query: INITIAL_CONFIG_QUERY,
pause: true
});
React.useEf
浏览 38提问于2020-07-22得票数 8
回答已采纳
我有一个代码，其中的API调用是在react应用程序的render方法中进行的，是正确的吗？API调用是从放置在另一个文件中的const函数内的函数发出的
浏览 0提问于2019-11-08得票数 0
render函数中的控制台日志显示数据。componentDidMount()的console.log(this.props)未定义(嗯？)。那件事怎么可能？我不明白async在React中是如何工作的。
class Graph extends React.Component {
constructor(props) {
super(props);
this.state = { startTime:this.props.startTime,
endTime:this.props.endTime,
浏览 100提问于2018-08-25得票数 0
1回答
由于某些原因，当尝试连接此组件时，react只是挂起而不会给出任何错误： import React, { useState, useEffect } from 'react';
import { useHttp } from '../../hooks/http.hooks';
import _ from 'lodash';
import profileImg from '../../img/system/profile/profileImg.svg';
function ProfileLink() {
const
浏览 17提问于2021-04-03得票数 1
回答已采纳
我正在尝试创建一个从API中获取数据的React项目，并且我试图从外部文件中使用useReducer钩子和useContext。文件夹结构：
publicsrc (在src文件夹中，除了其他组件和其他files)package.json之外，还有context.js和reducer.js。
reducer.js：
const reducer = (currentState, action)=>{
switch(action.type){
case 'setBreedList':
// console.log('
浏览 2提问于2021-06-27得票数 0
回答已采纳
我正在尝试使用Typescript创建一个React功能组件，它将从API获取数据，然后将数据发送到另一个组件，但是，我得到了一个错误：" error : Too loop- renders . React限制呈现的次数，以防止无限循环。“ 请提供任何建议！ useEffect(() => {
await axios.get('https://quote-garden.herokuapp.com/api/v3/quotes/random').then((resp) => {
setQuote1(resp.data.data[
浏览 133提问于2021-10-05得票数 0
回答已采纳
我的代码有问题。下面是我用App.tsx编写的代码 function App() {
const dispatch = useDispatch();
const auth = useSelector((state: RootStateOrAny) => state.auth);
const token = useSelector((state: RootStateOrAny) => state.token);
useEffect(() => {
const firstlogin = localStorage.getItem('fi
浏览 17提问于2021-10-12得票数 0
我正在构建一个应用程序后，Rest国家API挑战来自前端()。我遇到了一个问题。单击countryDetail.js中的路由器链接时，url会更改，但除非刷新页面，否则组件不会重新呈现。
CountryDetails.js
import React, { useState, useEffect } from "react";
import axios from "axios";
import {Link} from "react-router-dom";
import {CountryDetailStyles, ImgContainer, Cou
浏览 3提问于2021-06-15得票数 1
回答已采纳
以下是代码：
import React, { useState } from 'react'
function App() {
const [a, setA] = useState(1)
setA(2)
return (
<div>
<h1>{a}</h1>
</div>
);
}
误差太多的重新渲染。React限制呈现的数量，以防止无限循环。
为什么它会导致无限循环？
我认为原因是函数组件就像呈现函数一样，所以当setState在render函数中时会导致无限循环。
有官方解释吗？
浏览 10提问于2020-02-20得票数 5
回答已采纳
在React Hooks文档中，展示了如何在组件的清理阶段执行removeEventListener。
在我的用例中，我尝试对功能组件的状态属性执行removeEventListener条件。
下面是一个永远不会卸载组件但应该删除事件侦听器的示例：
function App () {
const [collapsed, setCollapsed] = React.useState(true);
React.useEffect(
() => {
if (collapsed) {
window.removeEventListener('k
浏览 4提问于2019-03-26得票数 46
回答已采纳
我在Expo中使用React Native，这原本是一个基于类的组件，但我将其转换为功能组件，因为我想使用钩子。现在它抛出了屏幕截图中显示的错误。我不知道如何处理这个错误?我看过另一个关于这个的帖子，但有点迷失了(我正在用react练习)。这个组件基本上是一个带标记的GPS！谢谢 ? import { View, Text, Animated, StyleSheet } from "react-native";
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
i
浏览 32提问于2021-03-29得票数 0
在相同组件的以下两个版本中，一个是基于函数的，另一个是基于类的，在函数的正文中的代码和类的componentDidMount主体中的代码之间有什么区别呢？：
function Foo(props) {
// some code goes here ...
return <h1>Foo</h1>;
}
class Foo extends React.Component {
componentDidMount() {
// code goes here ...
}
render() {
return <h1>Fo
浏览 1提问于2020-02-08得票数 0
回答已采纳
1回答
我有一个子组件，它通过一个事件向父组件发出一个操作：
子组件：
export default function ChildComponent(props) {
const classes = useStyles();
const [value, setValue] = React.useState([0, 5]);
const handleChange = (_, newValue) => {
setValue(newValue);
props.updateData(newValue)
};
return (
<div classNa
浏览 1提问于2020-11-14得票数 3
回答已采纳
考虑下面的代码片段：
import { useEffect } from "react";
export const Hello = () => {
useEffect(() => {
console.log("Mounted");
return () => {
console.log("Unmounted");
};
}, []);
return <h1>Hello</h1>;
};
我观察到，每次进行一些更改和保存时，都会打印Unmounted和Mo
浏览 8提问于2021-10-18得票数 1
回答已采纳
我想通过调用initializeInput来初始化卡。但它在循环中被调用，并耗尽内存。但是如果我在button click Reset上调用相同的函数，它工作得很好。 如何在启动时调用initializeInput？ const CardsContainer = (props) => {
var inputNum1, inputNum2, inputNum3;
const [inputNumber, setInputNumber] = React.useState([inputNum1,inputNum2,inputNum3 ]);
const initializeI
浏览 234提问于2020-04-27得票数 1
我做了这个定制的钩子以获得窗口宽度。它起作用了，但我有个问题。我使用useEffect在组件挂载时将事件侦听器添加到window。但是，我的朋友建议我使用return函数删除事件侦听器。这是怎么回事？返回的函数不应该破坏事件侦听器并使其不能工作吗？既然这是在组件挂载上发生的一次？
import React from "react";
const useWindowSize = () => {
const [windowSize, setWindowSize] = React.useState({
width: window.innerWidth,
h
浏览 10提问于2022-02-28得票数 1
回答已采纳
问题：
为什么没有数组的代码总是相对于只执行一次的数组的代码进行迭代？
斯塔克布利茨：
无数组：
与数组：
谢谢!
无数组
import axios from 'axios';
import * as React from 'react';
import { useEffect, useState } from 'react';
import './style.css';
export default function App() {
const [data, setData] = useState();
use
浏览 3提问于2022-06-12得票数 0
回答已采纳
假设我有一个react钩子组件
const Child = (props) => {
useEffect(()=>{
// fetch data
...
});
return (
//Displays fetched data
)
}
然后在父组件中使用它
class Parent extends Component {
render () {
... <Child ... /> ...
}
}
我的问题是，如果Parent在其状态改变(但与Child无
浏览 9提问于2020-02-19得票数 0
回答已采纳
我有一个关于使用react进行api调用的问题。他们说要在componentDidMount生命周期方法中制作它们，但如果组件已经挂载，我是否必须以某种方式重新渲染它？如果我发出一个get请求，而组件显示了它获得的一些数据，该怎么办呢？谢谢!
浏览 29提问于2020-02-26得票数 1
回答已采纳
我能够在我的react应用程序上使用上传图片：
在选择和上传图像时，我会看到图像的预览，以及删除、添加更多内容的选项：
单击“继续”按钮后，reporting (来自const [reporting, setReporting] = useState(false);)的状态设置为true，我认为这将触发DOM的重新呈现，包括UploadManager组件的消失，该组件包含上面所示的Uppy仪表板。现在，呈现一个<ReportForm>组件：
...
{reporting ? (
<ReportForm assetReferences={files}
浏览 16提问于2021-11-05得票数 0
回答已采纳
我有两个组件，一个包含状态和子组件的父组件，它有一个select下拉列表，应该修改父组件中的状态。当我试图在React工具/组件中检查这个组件时，我会收到一个警告：“未登录错误:无效的钩子调用。钩子只能在函数组件的主体内调用。这可能发生在以下原因之一：”然而，给出的任何理由似乎都不适用于我的代码。
这是我的代码：
家长：
import React, { useState } from 'react'
import Child from './child'
const Parent = () => {
const [gender, setGender]
浏览 1提问于2020-04-15得票数 1
回答已采纳
1回答
如何使钩子状态更改为只呈现钩子而不是组件的呈现？为此，我将逻辑添加到空返回中间件组件中，但我不知道这是否是个好主意。
import { useState, useMemo, useEffect } from "react";
import "./styles.css";
function useTime() {
const [a, setA] = useState(0);
console.log("good-render", a);
useEffect(() => {
setInterval(() => {
浏览 0提问于2021-04-20得票数 0
回答已采纳
我有一个单元格数组，需要根据来自套接字服务器的一些用户输入来更新。但是，每当我试图使用useState()更新索引时，就会对“错误:太多的重新呈现”做出反应。我尝试添加一个状态来表示网格已经改变，但这仍然会产生相同的错误。请帮我:<
const GameUI = ({ height, width }) => {
const [grid, setGrid] = React.useState([]);
const [didUpdate, setDidUpdate] = React.useState(0);
React.useEffect(() => {
fo
浏览 4提问于2022-05-08得票数 -1
回答已采纳
我编写了下面的React练习，它不使用钩子并呈现一个按钮。
const Button = ({ onClick }) => <button onClick={onClick}>Do Nothing</button>;
const Base = () => {
const onClickFunction = (() => {
console.log("Creating OnClick Function");
return () => {};
})();
return (
<div cla
浏览 1提问于2020-06-28得票数 2
回答已采纳
我希望将react-router配置为在呈现任何路由之前等待Firebase登录(或注销)。
我已经看到react-router有一个onEnter()钩子，但这似乎是一个即时回调，我还没有完全弄清楚如何让react-router等待直到firebase触发firebase.auth().onAuthStateChanged(...)事件。
react-router是否包括一些处理此类情况的功能？
浏览 3提问于2016-07-15得票数 4
回答已采纳
添加基于在useEffect挂钩之外不断更新的状态或值进行条件呈现的代码是一个问题/坏习惯吗？
像这样
function Home() {
const { state } = useLocation();
const [validation, setValidation] = useState();
const [MainData, setMainData] = useState();
if(true)
do somthing....
else
do somthing....
React.useEffect(() => {
so
浏览 5提问于2022-06-05得票数 0
我使用json服务器获取和发布数据。当我更新服务器上的数据并返回到主屏幕时。除非我刷新页面，否则它仍然显示旧数据。我的useEffect被打电话了。但是为什么它没有更新状态呢？增加了一个gif，这样人们就可以了解我的问题了。
Note.js (HomeScreen)
import React, { useState, useEffect } from "react";
//import notes from '../assets/data'
import Listitem from "../components/Listitem";
/
浏览 5提问于2021-10-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
