useEffect缺少依赖项'props‘
useEffect是React中的一个钩子函数，用于处理副作用操作。它接收两个参数，第一个参数是一个回调函数，用于执行副作用操作，第二个参数是一个依赖数组，用于指定在依赖项发生变化时才执行副作用操作。
在给定的问答内容中，useEffect缺少了依赖项'props'。这意味着useEffect中的副作用操作将在组件每次渲染时都执行，而不仅仅是在props发生变化时执行。
为了解决这个问题，我们可以将'props'添加到依赖数组中，以确保只有当props发生变化时才执行副作用操作。例如：
useEffect(() => {
// 副作用操作
}, [props]);在这个例子中，副作用操作将只在props发生变化时执行。
关于useEffect的更多信息，你可以参考腾讯云的React Hooks文档：React Hooks。
另外，如果你在使用React开发应用，并且需要在云上部署你的应用，腾讯云提供了Serverless Cloud Function（SCF）服务，它可以帮助你快速部署和运行无服务器的React应用。你可以通过腾讯云SCF官方文档了解更多信息：Serverless Cloud Function。
相关·内容
我使用useEffect只在componentDidMount时使用一次。
我在功能组件中重用requestPatientsApi。
在useEffect的第二个参数中添加所有依赖项将发生无限呈现。
useEffect(() => {
requestPatientsApi();
}, []);
const requestPatientsApi = async (skip: number = 0, limit: number = 100) => {
try {
const { data } = await get<A
浏览 0提问于2019-09-06得票数 0
我只想让useEffect在组件挂载上运行一个函数，但是函数引用道具和反应给出了一个关于将道具添加到依赖数组中的警告--但是如果我这样做，那么它将不再只在组件挂载上运行。
有课程：
componentWillMount() {
if (!this.props.variableInitialized) {
this.props.dispatchPageFunction({ page: 'dashboard' })
this.props.history.push('/')
} else {
this.p
浏览 0提问于2019-07-21得票数 0
回答已采纳
2回答
React缺少依赖项道具
、、、
在我的react/redux应用程序中，每次挂载组件时，都会调用一个操作从redux状态检索数据。我的方式行不通
下面是我遇到的错误：
React useEffect缺少一个依赖项：'props‘。要么包含它，要么删除依赖数组。但是，当任何道具发生变化时，“props”都会发生变化，因此首选的修复方法是在useEffect调用之外分解“props”对象，并引用useEffect中的那些特定道具-hooks/react。
这是我的代码：
import { getInvoiceData } from "../../actions/tables"
const Table
浏览 1提问于2020-08-01得票数 3
回答已采纳
我有一个简单的日期选择器组件，为预置日期范围按钮。
问题在我的useEffect中:我正在使用它在呈现时与初始状态进行通信，但当然会发出警告("useEffect缺少依赖项“)。
这样做有好的模式吗？
儿童：
const LAST_7 = "LAST_7";
let to, from, filter;
// figure out values for "from", "to", and "filter" (which is set to LAST_7 in case "from" and
浏览 2提问于2020-04-23得票数 6
问题所在
我希望防止触发useEffect钩子，该钩子在依赖项数组中包含一个useState值。为了说明这一点，请看下面的例子。
详细解释
在初始化过程中，表单将设置一些值，因此我定义了一个标志，以防止在完全初始化之前执行另一个效果，但我也不希望在初始化标志状态更改时触发第二个效果。
我能以某种方式阻止对这个isInitialization 状态的跟踪吗？我找不到一个线程来解决我的问题。您是否愿意将与此相关的线程连接起来？提前谢谢。
示例
export function SomeComponent(props) {
const [form] = useForm();
const [se
浏览 2提问于2021-03-01得票数 2
我的问题是，一旦在useState ()中设置了useEffect变量，如何重新设置它。这是我的密码：
const [warningDay, setWarningDay] = useState('');
const [warningMonth, setWarningMonth] = useState('');
const [warningYear, setWarningYear] = useState('');
useEffect(() => {
if (errMsg) {
setWar
浏览 4提问于2021-02-23得票数 0
回答已采纳
我正在创建一个计数器组件，并将计数作为来自父组件的支柱传递。
在挂载计数器组件时，我将在窗口对象上注册一个焦点事件处理程序。
每当窗口聚焦时，我都会尝试在控制台中打印count支柱值。但我没有得到最新的计数道具值，而是得到初始计数值。
发生这种情况是因为每当在任何支柱中发生更改时，就会在内存中创建新的props对象并将其传递给子组件，而且当计数支柱发生更改时，我不会附加事件处理程序，因此我将得到初始的支柱(陈旧的道具)值，因为displayCount函数不再附加到焦点事件，并且仍然指向支持对象的旧引用？
如果我错了，请纠正我。
使用裁判就行了。但我想知道这种行为背后的确切原因是什么。
//an
浏览 7提问于2022-07-24得票数 0
回答已采纳
1回答
此组件的行为有些奇怪
我试着用几种方法来实现。但我仍然不知道如何正确初始化。
当此状态
const [state, setState] = useState({
qualification: props.profile.qualification,
twitter: props.profile.twitter,
});
结果状态(“AA01”+JSON.stringify(console.log))；AA01{}所有元素不知何故都丢失了。
所以我把它们改成这样
const [state, setState] = useState({
qualific
浏览 1提问于2021-04-03得票数 1
我的组件中有一个useEffect钩子，它调用一个Redux操作来获取一些数据。
useEffect(
() => {
props.getClientSummaryAction();
},[]
);
当我去保存文件时，linter会这样做。
useEffect(
() => {
props.getClientSummaryAction();
}, [props]
);
这显然将我的组件发送到一个无限循环中，因为getClientSummaryAction获取一些数据来更新道具。
我使用了这样的解构，linter更新了数组。
const { getCl
浏览 0提问于2019-08-01得票数 3
回答已采纳
新的反应和钩子，我正在尝试做一个使用钩子登录模块。但是，当我无法更新我的身份验证状态时。在其他地方可以看到，useState不会立即更新，需要与useEffect()结合才能进行更新。但是，我在自定义钩子中使用useState，不确定如何通过useEffect或其他方式进行更新。
我是不是在做一些反模式的事情？有人能帮上忙吗？
const useAuth = () => {
const [auth, setAuth] = useState( {} );
useEffect(()=>{
console.log(auth)
},[])
浏览 2提问于2021-05-16得票数 0
我是新的反应，并试图制作一个加载/问候页面，导航到下一个在几秒钟后显示。在function路由器v6中，我们有允许您控制导航的useNavigate()钩子，我正在使用它通过在useEffect()钩子中设置一个超时来成功地调用导航函数。但是，编译器正在抱怨我缺少一个依赖项。不过，我只希望它运行一次，而不是当navigate发生变化时。做这件事最好的方法是什么？
谢谢!
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
function Gree
浏览 33提问于2022-09-14得票数 4
回答已采纳
我有一个如下图所示的React组件(有些部件是完整的)，并且我使用redux进行状态管理。getRecentSheets操作包含AJAX请求，并将响应分派给redux，redux使用响应的数据更新state.sheets.recentSheets。
所有这些都如预期的那样工作，但是在构建时抛出关于useEffect的警告缺少一个依赖项：'getRecentSheets‘。但是如果我将getRecentSheets添加到使用useEffect的依赖数组中，它将开始无限期地重新运行，从而冻结应用程序。
我读过关于useEffect钩子的React文档，但它并没有为这种使用提供一个很好的例子
浏览 3提问于2020-03-04得票数 5
我试图使用连接到组件的道具从useEffect中的状态变量中删除项。我希望从状态变量中获取初始值，然后删除该数组中的元素，并再次将状态变量设置为新值。但是，当我没有在依赖数组中传递状态变量时，它会以React Hook useEffect has a missing dependency: 'abc'. Either include it or remove the dependency array的形式抛出警告，而当我传递它时，它会进入无限循环，我认为这是正确的，因为useeffect工作。这就是我正在尝试的效果：
const [abc, setAbc] = useState
浏览 3提问于2021-07-22得票数 3
回答已采纳
我正在建设一个多语言网站，需要在URL查询参数中显示当前选择的语言(不仅是语言，而且为了亲吻，我将只考虑这一点)。
我使用react-intl进行网站翻译，并将当前选择的语言存储在redux中。
下面是我当前的路由器(HashRouter)的外观：
return (
<div className="App">
<Provider store={store}>
<Router hashType="noslash">
<Content />
&
浏览 3提问于2020-03-05得票数 0
我有一个组件，它在页面加载时使用useeffect更新状态。但是当我使用history.goback()函数从一个组件返回到我的银行时，组件的使用效果就不起作用了。下面是我的代码；
bottomnavigator.js：
const goBack = () => {
if (props.history.location.pathname !== "/app/phone" && props.history.location.pathname !== "/") {
props.history.goBack();
}
浏览 2提问于2021-07-07得票数 0
2回答
我在这里的目标是在useEffect中调用操作。 const ShowTodos = (props) =>{
useEffect(()=>{
props.fetchTodos()
},[])
}
const mapStateToProps = (state)=>{
return {
todos:Object.values(state.todos),
currentUserId:state.authenticate.userId
}
}
export default connect(mapStateToProps,{fetchT
浏览 25提问于2019-04-30得票数 6
回答已采纳
我尝试使用useEffect，但得到如下所示的错误：
React Hook useEffect has a missing dependency: 'data'. Either include it or remove the dependency array
这是我的组件，
let id = props.location.pathname.split("--")[1];
let str = props.location.pathname.split("--")[0].substr(1);
const data = {id: id, link:
浏览 1提问于2019-11-08得票数 0
我有一个非常简单的组件的小问题，它不能显示我想要的。 const UserCards = (props) => {
const [retrievedData, setRetrievedData] = useState();
useEffect(() => {
const data = [];
props.users.map((user) => {
data.push(<UserCard key={user.username} user={user} />);
});
setRetrievedData(dat
浏览 8提问于2020-06-25得票数 0
4回答
我想在UseEffect中调用一个道具函数。以下代码起作用：
useEffect(() => {
props.handleClick(id);
}, [id]);
但林特抱怨props并不是一种依赖。
如果我这样做，那么代码就不再工作了，并且我有最大重呈现错误：
useEffect(() => {
props.handleClick(id);
}, [id, props]);
我怎样才能解决皮棉的问题？
示例代码：
父组件
const ParentGrid = ({rows, columns}) => {
const [sel
浏览 2提问于2020-06-19得票数 16
我正在尝试在Next.js应用程序中使用库。
我在/pages中添加了_app.js文件作为，作为放置选取器提供程序的位置：
import React from "react";
import PropTypes from "prop-types";
import { ThemeProvider } from "@material-ui/core/styles";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils
浏览 1提问于2020-08-09得票数 3
1回答
我尝试用useEffect和setInterval创建简单的计时器。理论上，点击它必须：
重新启动冷却
const restartCooldown = () => {setCooldownDuration(靶活动‘持续时间’)}
useEffect()将看到这一点，并在间隔内每秒钟减少冷却时间。
useEffect(() ) => {让区间if (props.activity.cooldown) { if (cooldownDuration > 0) { if (props.activity.id === 1) { console.log('Activ
浏览 2提问于2022-11-11得票数 0
回答已采纳
2回答
在你把它标记为重复之前--请理解我已经试着跟读了这里的大部分文章，但是它们似乎都帮不了我，也许我忽略了什么，或者我今天脑子里放了个屁。所以请原谅我再次问这个问题。
在我的组件中，我有以下代码要点。
let { teamid } = props.currentTeam
useEffect(() => {
if (teamid) {
props.teamMembers(teamid);
}
}, [teamid]);
正如您可以从上面的代码中验证的那样，我只在我的useEffect中使用teamid。我不使用整个道具对象。然而，用这个消息来回应仍然是抱
浏览 4提问于2020-11-14得票数 2
回答已采纳
1回答
我有这样的代码：
function Parent(props) {
const [items, setItems] = useState([]);
const [itemArr, setItemArr] = useState([]);
const [reRender, setReRender] = useState(false);
useEffect(() => {
let _items = items.slice(0).reverse().map((item, idx) => {
return {
浏览 1提问于2021-12-20得票数 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
回答已采纳
3回答
我正在将一些老的基于类的反应组件转换成函数组件。我偶然发现了一个logout类组件(我没有编写代码)，它如下所示：
import React from 'react';
import {
Text,
} from 'react-native';
import { connect } from 'react-redux';
import { deauthenticateUser } from '../state/actions';
class LogoutScreen extends React.Component {
浏览 5提问于2022-09-30得票数 1
我在React中有一个功能组件： export default function (id) {
const [isReady] = useConfig(); //Custom hook that while make sures everything is ok
useEffect( () => {
if(isReady)
renderBackend(id);
});
async function renderBackend(id) {
const resp = await getBackend
浏览 45提问于2021-07-29得票数 0
我想做一个useEffect方法，当任何道具改变时，它都会调用，但不是所有的代码，只有一个专门用于这个道具 我想是这样的.在这个时刻，所有的代码都被称为一、二或三个改变。 const SomethingComponent = (props: any) => {
const {one, two, three} = props;
useEffect(() => {
if(something for one props){
code for one
}
if(something for two props){
浏览 12提问于2019-09-19得票数 1
回答已采纳
我有这两个文件，WordList.js：
import React, { useEffect, useState } from 'react';
import WordListItem from "./WordListItem";
function WordList(props) {
var cards = props.cards;
var cardsElements = null;
var [ id, setId ] = useState('');
function contextMenuClickHand
浏览 3提问于2021-07-28得票数 0
import React, { useState, useEffect } from 'react';
import Form from 'react-bootstrap/Form';
function Switch(props) {
const [enabled, setEnabled] = useState(false);
useEffect(() => {
if(enabled !== props.enabled) {
setEnabled(props.enabled);
}
}, [props.enabl
浏览 0提问于2020-03-31得票数 0
2回答
我希望子组件根据我通过父组件传递的道具来获取一个Firebase集合。问题是，当我试图在我的子组件的UseEffect()中获取我的道具时，它是未定义的。
我试过了
export default function Parent(){
const [activeUser, setActiveUser] = useState();
const [users, setUsers] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const fetchUsers = async () =&g
浏览 1提问于2021-07-01得票数 0
1回答
我从一个新闻API中获取数据，并在完成时将其存储在我的状态中，然后将状态的值作为属性传递给子组件。
API返回的数据是一个对象数组。我只想将该数组(现在处于我的状态)的一个元素(对象)传递给子组件。所以，我通过使用数组常规遍历方法([])传递一个元素来做到这一点，但不幸的是，当我尝试在我的子组件中使用useEffect钩子来控制日志属性(这是有效的)时，我无法从钩子或组件的主体访问我的元素(对象)的属性，因为它一直告诉我它是未定义的，并且我必须在useEffect清理函数中取消所有订阅和异步任务。因此，我尝试使用splice方法将该元素作为数组传递，以便使用map方法从子组件中进行遍历(这很有
浏览 0提问于2019-05-30得票数 12
回答已采纳
当用户在输入之外单击时，我尝试使用mousedown事件来关闭自动完成。 代码： // listen to mouse clicking outside of autocomplete or input
useEffect(() => {
document.addEventListener("mousedown", handleClickOutsideAutocomplete);
return () => {
document.removeEventListener("mousedown", handleClickOutsideA
浏览 14提问于2020-10-06得票数 1
2回答
我试图根据个人是否在组件上向下滚动来控制React组件的可见性。可见性作为"in“属性传递给Fade元素。
我已经使用添加了侦听器onMount的UseEffect钩子设置了一个侦听器。实际的onScroll函数应该更新scrollTop状态(这是页面顶部高度的当前值)，然后更新滚动状态(它将事件滚动到页面顶部的滚动与前一个状态进行比较，如果第一个状态大于第二个状态，则返回true)。
但是，由于某些原因，setScrollTop钩子不工作，滚动状态继续保持为0。
我做错了什么？下面是完整的组件：
export const Header = (props) => {
con
浏览 28提问于2019-08-12得票数 22
回答已采纳
2回答
当一个组件加载时，我试图通过useEffect来设置地图的纬度和经度。问题是在将道具添加到useEffect之前，组件会加载和渲染。 useEffect(() => {
console.log(props.bandLocation)
// If I run this with a setTimeout it returns the data... but without the setTimeout it is an empty array. I need to set the latitude and longitude below to the data passe
浏览 16提问于2020-04-14得票数 1
所以，我定义了一个状态： const [quantity, setQuantity] = useState(1); 在我的类组件中，我将其更新如下： componentDidUpdate(prevProps, prevState) {
if (this.props.cartItem.quantity !== prevProps.cartItem.quantity) {
let quantity = this.props.cartItem.quantity;
this.setState((state, prop
浏览 18提问于2019-05-03得票数 0
回答已采纳
我有一个仪表板组件，其中有两个组件用于选择我需要显示的数据。第一个选择指示客户端。第二个选择指示项目。第二个选择的选项取决于所选的客户端。
当我选择客户机并将id作为道具传递给第二个选择时，我会更改仪表板中的状态。这很好，在我的第二个选择中设置const selectedClient = props.selectedClient;之后，如果我做了一个console.log(selectedClient)，我会看到它发生了变化。
但是，当我选择另一个客户端时，不会触发useEffect。
仪表板组件
class Dashboard extends Component {
construc
浏览 3提问于2020-10-01得票数 1
回答已采纳
我在这里有一个useEffect代码：
useEffect(() => {
if (status === "completed" && !error)
props.onAddedComment();
}, [status,error,props.onAddedComment]);
，但我在终端中得到了这样的警告： React useEffect缺少一个依赖项：'props‘。要么包含它，要么删除依赖数组。但是，当任何道具发生变化时，“props”都会发生变化，因此首选的修复方法是在useEffect调用之外分解“props
浏览 5提问于2022-06-25得票数 3
回答已采纳
我正在使用钩子在我的反应应用程序处理状态。
我的应用程序有与notes相关联的categoryId。
通过挂载NoteList组件来显示特定类别中的注释。
<NoteList categoryObj={categoryObj} />
NoteList功能组件
export const NoteList = (props) => {
const [notesToRender, setNotesToRender] = useState(props.notes)
useEffect(() => {
console.log('I fired!
浏览 4提问于2020-12-03得票数 0
我是非常新的反应，我是工作的防火墙数据库和反应。目前，我正在尝试显示嵌套集合中的信息。当我运行我的应用程序，我得到了无限循环的我的形象。我一直在尝试不同的方法来获取我的信息，但我不断地遇到错误。我做错了什么导致这个无限循环，以及我如何成功地呈现我的信息。谢谢！我的数据库
import {firebaseLooper} from '../tools/firebaselooper';
import { usersCollection } from '../tools/firebase';
import { AuthContext } from "./Auth
浏览 2提问于2021-08-18得票数 1
回答已采纳
我在useeffect中有这个回调函数，我想从父js将差异props.id传递给这个文件，所以我得到了不同的数据。问题是，当我从parent.js传递一个新的props.id时，const res = await axios.get("messages/get-all-messages/?receiver=" + props.id, config );没有被召回--当我传递一个新的props.id时，如何再次调用这个api？
function chat(e) {
e.preventDefault()
const config = {
header
浏览 7提问于2021-12-23得票数 1
我已经创建了一个组件，在文本框的快捷键上，我重定向如下
const Search = (props) => {
const searchKeyDown = (e) => {
if(e.key === 'Enter'){
if(e.target.value){
props.history.replace(`/search/${e.target.value}`)
} else {
alert('Search cannot be empty')
}
}
}
r
浏览 10提问于2020-07-30得票数 0
回答已采纳
下面是我的反应代码：
function ProtectedRoutes(props) {
useEffect(() => {
setTimeout(props.verify_access, 100)
}, [])
const { isAuth } = props
if(isAuth){
return <Outlet />
}else{
return <Navigate to={"/login"}/>
}
}
const map
浏览 5提问于2022-03-17得票数 1
回答已采纳
我在useEffect (如componentDidMount)中有一段代码： useEffect(()=>{
const idChat = props.match.params.id;
const data = {
idChat,
user: props.user._id
}
authService.getChat(data)
.then(res =>{
const userChat = res.data.users.filter(e=> e!== data.user).toString()
浏览 15提问于2019-09-24得票数 0
回答已采纳
有人能帮我摆脱这个警告吗？
React useEffect缺少一个依赖项：“调度”。要么包含它，要么删除依赖数组react/react。
这是我的密码
函数寄存器(Props){ const inusers=useSelector( (state) => {返回状态})；const history=useHistory() const dispatch=useDispatch ()；// const formik = useFormikContext()；useEffect( ) => {调度(fetchUser()) }，[]
浏览 6提问于2021-10-19得票数 7
我收到了这些小错误
./components/create-nft/InstagramSelector.js
39:15 Warning: Effect callbacks are synchronous to prevent race conditions. Put the async function inside:
useEffect(() => {
async function fetchData() {
// You can await here
const response = await MyAPI.getData(someId);
// .
浏览 2提问于2022-05-06得票数 1
1回答
useEffect不是第一次触发
、、、、
import React, { FC, useEffect } from "react"
import YouTube from "components/YouTube"
import { Typography } from "@mui/material"
import { Container } from "layouts/Player/emotion"
import Box from "@mui/material/Box"
import VideoGrid from "components/
浏览 5提问于2022-08-18得票数 0
回答已采纳
我使用React将函数从父组件传递给子组件，并试图在useEffect()挂钩中运行它。
亲本
function Parent(props) {
function alertMe() {
alert('me');
}
render (
<div>
<Child alertMe={alertMe} />
</div>
);
}
儿童
function Child(props) {
const { alertMe } = props;
useEffect(() => {
浏览 6提问于2019-10-01得票数 0
我正在制作一个React，我收到了这个警告。当组件挂载时，我尝试进行两个API调用：
useEffect(() => {
getWebsites();
loadUserRatings();
}, []);
这就是为什么我有一个空数组，因为我只想在组件挂载时调用它一次。但我还在收到警告，我该怎么解决呢？
这两个函数使用react连接传递给组件，整个组件如下所示：
const Wrapper = (props) => {
const { getWebsites, loadUserRatings } = props;
useEffect(() => {
g
浏览 7提问于2020-04-07得票数 10
我正在尝试从Firestore数据库中获取一组问题，然后将它们存储在本地数组中，以便稍后在测验中使用。当我在获取数据时，它是异步运行的。我以前处理过这个问题，解决方案是一个useEffect()钩子和有条件呈现组件。 我的代码目前看起来像这样： var questions = [];
var collection = useRef('Planning');
var [loading, setLoading] = useState(true);
useEffect(() => {
if (props.track === 'Testing &a
浏览 110提问于2020-11-20得票数 2
回答已采纳
我正在转换使用componentDidMount/Update/Unmount生命周期来反应钩子的代码，并在控制台中不断出现react-hooks/exhaustive-deps作为警告。
我们的新代码似乎可以按预期工作，所以我的想法是关闭这些警告。但是，如果我遗漏了什么，下面的代码中的警告是必要的。
旧的componentDidMount/Update/Unmount代码
state = {
container: canUseDOM ? createContainer(this.props.zIndex) : undefined,
portalIsMounted: fal
浏览 31提问于2019-10-25得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
