Reack Hook: useEffect()被调用两次，首先是一个n空数组，然后是数据库中的值
React Hook是React 16.8版本引入的一种新特性，它可以让我们在函数组件中使用状态和其他React特性，而无需编写类组件。其中，useEffect()是React Hook中的一个重要函数，用于处理副作用操作。
当我们在函数组件中使用useEffect()时，它会在每次组件渲染完成后执行。useEffect()接受两个参数，第一个参数是一个回调函数，用于执行副作用操作；第二个参数是一个依赖数组，用于指定在依赖项发生变化时才重新执行useEffect()。
在给定的问答内容中，useEffect()被调用两次的原因是因为依赖数组的变化。第一次调用是在组件初次渲染时，依赖数组为空，表示没有任何依赖项。这意味着useEffect()只会在组件初次渲染完成后执行一次。
第二次调用是在数据库中的值发生变化时。当数据库中的值发生变化时，组件会重新渲染，而useEffect()会根据依赖数组中的变化重新执行。在这种情况下，依赖数组可能包含数据库中的值，当数据库中的值发生变化时，依赖数组也会发生变化，从而触发第二次调用。
为了解决useEffect()被调用两次的问题，可以通过调整依赖数组的内容来控制useEffect()的执行时机。如果希望只在组件初次渲染时执行一次，可以将依赖数组设置为空数组，即[]。如果希望在数据库中的值发生变化时执行，可以将依赖数组设置为包含数据库中的值的数组。
需要注意的是，如果依赖数组中的值是一个对象或数组，需要确保在每次重新渲染时都是一个新的引用，否则useEffect()可能无法正确地检测到变化。
关于React Hook和useEffect()的更多信息，可以参考腾讯云的React Hook文档和useEffect()文档：
- React Hook文档：https://cloud.tencent.com/document/product/213/60977
- useEffect()文档：https://cloud.tencent.com/document/product/213/60978
相关·内容
我是一个简单的反应应用程序组件，但我无法理解为什么“内部使用效果挂钩”。正在控制台上打印两次。它不应该仅仅在组件呈现之后打印一次，因为没有状态更改，并且依赖数组也是空的？下面是代码：
export default function App(){
const [count, setCount] = React.useState(0);
useEffect(()=>{
console.log("Inside useeffect hook.")
},[]);
return(
<h1>hey.</
浏览 13提问于2022-11-14得票数 0
1回答
我有两个正在使用的API数据。我试图将数据映射为列表项。我还试图使用productCode作为匹配点来映射正确项目的正确徽标。我怎样才能做到这一点？我已经把我的密码附在下面。每个项目必须有徽标、金额和productCode。如果有更好的方法合并这两个API，我很乐意知道.
export default function App() {
const [Alldata, setAlldata] = useState([]);
useEffect(() => {
// GET request using fetch inside useEffect React hook
浏览 1提问于2022-05-04得票数 0
回答已采纳
我使用axios库通过json-server从json文件中获取数据。当我在单个组件中加载和使用response对象时，它工作得很好。但是，当我将这个响应对象从父组件传递给子组件时，它并没有加载数据。也没有收到任何错误，有人能帮我了解其中的区别以及我的方法有什么问题吗？
//Scenario-1 : working perfectly fine:
import React, { useState, useEffect } from 'react';
import Display from './Display';
import Note from '.
浏览 12提问于2019-11-21得票数 0
回答已采纳
我正在使用ReactJS和谷歌FireStore创建一个简单的股票投资组合跟踪应用程序。如何在不触发警告"React Hook has a missing dependency“的情况下从useEffect中访问数据库函数？我尝试过使用useCallback，但到目前为止还没有成功。或者可以忽略这些警告？
var db = firebase.firestore();
useEffect(() => {
//get user's cost averages from db
if (props.userStatus) {
db.collect
浏览 4提问于2021-10-23得票数 1
1回答
我需要对HTML-元素的访问，以便稍后与它们交互(比如在按钮单击上添加动画)。为此，我想使用useMemo-hook。我的设置如下：
我正在通过useEffect从防火墙获取数据
useEffect(() => {
const unsubscribe = database.collection("users").onSnapshot((snapshot) => {
snapshot.forEach((doc) => {
...
}, []);
并将其存储在useState-hook:中。
const [users, setUsers] =
浏览 0提问于2021-05-11得票数 0
回答已采纳
2回答
我正在努力将websockets添加到我的Node/React应用程序中，以自动反映对所有客户端的更改。所以我有一个websockets模块，它有onclose、onopen和onmessage事件以及一个readyState函数。因此，我的组件需要更新的websocket值，对该模块进行调用并获取数据。这个数据变量是空的，但是当我在模块本身的onmessage事件中将它安慰出来时，它就有了我想要的所有信息。
下面是我如何在组件中调用websocket模块：
const onConnected = (socket) => {
socket.send(
JSON.s
浏览 1提问于2021-02-18得票数 1
回答已采纳
// Fetch Products
const fetchProducts = async () => {
const { data } = await axios.get('/api/products')
setProducts(data)
}
// Retrieve all products at reload
useEffect(()=>{
fetchProducts()
},[])` 这是一个简单的函数，用于在加载主页组件时检索产品。因此，每次加载时都应该运行fetch
浏览 48提问于2021-09-06得票数 1
回答已采纳
我试图通过props将一个对象传递给子组件。该值是在useEffect钩子中设置的，在传递给子组件时会丢失。
我曾尝试在一个单独的函数中设置useEffect钩子之外的对象的值，但该值仍然丢失。
import React, { useState, useEffect } from 'react';
function SetValue(props){
let users = {};
useEffect(() => {
users = { user: 'bob' };
})
retur
浏览 2提问于2019-05-16得票数 41
回答已采纳
我被困在无效的钩子警告。这是一个第三方依赖，这也使得它难以控制。但这是一个引起问题的密码，
export class Component {
constructor() {
this._initReact();
}
_initReact(displayName) {
const component = React.forwardRef((props = {}, ref) => {
const _a = Object.assign(Object.assign({}, this._props), props),
浏览 3提问于2021-06-12得票数 0
回答已采纳
在我的useEffect代码中，我分派了一个从片中获取的操作。
但是它会抛出错误"React Hook useEffect has missing dependencies“，因为在钩子内部我正在使用操作和分派
...
const { actions } = useDataListSlice();
....
useEffect(() => {
dispatch(actions.loadInitialState());
}, []);
我可以向依赖数组添加操作和分派，但我不确定在其中添加操作和分派是否正确
浏览 2提问于2021-06-15得票数 1
React正在发出警告：
'someUnchangingArray‘数组使useEffect Hook (第42行)的依赖项在每次呈现时都发生变化。将其移动到useEffect回调中。或者，将'someUnchangingArray‘的初始化封装在它自己的useMemo() Hook react钩子/详尽-deps中。
为什么？someUnchangingArray是一个常量且不会改变，为什么render暗示它将在每次呈现时触发useEffect？
export default function Component(
const [initialized, setIni
浏览 2提问于2022-02-14得票数 0
有一个代码如下所示：
const MyComponent: React.FC<MyComponentProps> = ({
trackMyChanges,
iChangeEverySecond
}) =>
{
// React Hook useEffect has missing dependencies: 'iChangeEverySecond'
useEffect(() => {
calculateData(trackMyChanges, iChangeEverySecond);
}, [tr
浏览 5提问于2020-02-12得票数 2
回答已采纳
3回答
在创建了一个函数来设置值数据、当前用户loggedin并在useEffect中调用它之后，我收到了一条警告消息。下面是代码：
import React, { useEffect, useState } from "react";
...
const AddPost = () => {
const userStorage = sessionStorage.getItem('user');
const [values, setValues] = useState({
userId: '',
authorName: &#
浏览 1提问于2020-11-10得票数 0
回答已采纳
4回答
import { useContext, useEffect, useState } from 'react';
const Log = () => {
useEffect(() => {
console.log('Running ...')
},[])
return(<p>here</p>)
}
export default Log;
每当这些代码运行时，我就会让在浏览器控制台中运行两次.消息。
我认为它应该运行一次，因为我在useEffect中有一个空的第二个参数。
浏览 13提问于2022-05-24得票数 6
我是react的新手，并且是第一次使用useEffect。我收到了丢失依赖的警告，但这个应用程序工作得很好。如何解决警告问题？或者可以忽略这个警告？ useEffect(() => {
setValid(true);
}, []}; 我收到警告: React Hook缺少依赖项：‘useEffect’。
浏览 16提问于2021-04-21得票数 2
为什么响应钩子Axios调用两次..。即使是装上子弹的支票？
我已经习惯了this.setState，但是我试着理解为什么它会在我的控制台日志中出现两次。
我的代码：
import React, { useState, useEffect } from "react";
import axios from "axios";
const App = () => {
const [users, setUsers] = useState({ results: [] });
const [isLoading, setIsLoading] = useSta
浏览 1提问于2019-05-29得票数 4
回答已采纳
import React from 'react'
import { useParams, useEffect, useState } from 'react'
import axios from "axios";
import './App.css';
const Todo = () => {
const [todoDetails, setTodoDetails] = useState();
const { id } = useParams();
useEffect(() => {
// I wanted
浏览 5提问于2022-08-10得票数 0
回答已采纳
你好，我有一个组件，如下所示，我使用ushery钩子来初始化提要数组的myFeeds变量，并且运行一个效果来添加来自服务器(socket.io)的任何数据，但是当我在控制台记录结果时，myFeeds给了我一个空数组，可能的原因是什么？
const Dashboard = ({feeds}) => {
useEffect(() => {
getFeeds(); // this fetches feeds array
}, []);
const [myFeeds, setMyFeeds] = useState(feeds);
// useEffect hook to get re
浏览 0提问于2020-05-05得票数 0
回答已采纳
我为这个问题准备了一个小演示：
因此，我使用react-router-dom来创建单页面应用程序，并创建了两个页面(组件Page1和Page2)之间的标准导航。
问题是，每次我在页面之间切换时，就会调用useEffect钩子(第二个参数为空数组)(在演示中，您可以在控制台中看到它)。
我希望为每个组件只执行一次fetchData，然后重用该数据，无论用户是否要在页面之间切换。有没有可能在不检查useEffect函数内部的一些条件的情况下这样做？这让我有点困惑，因为useEffect []应该只对component运行一次，而这不是一个案例。
浏览 31提问于2019-10-25得票数 4
回答已采纳
我有以下内容：
import * as React from "react";
import {useAppDispatch, useAppSelector} from "./store/hook";
import {fetchUser} from "./store/slices/user/auth-slice";
import {useDispatch} from "react-redux";
function App() {
const dispatch = useDispatch();
useEffect
浏览 3提问于2022-06-06得票数 0
回答已采纳
我有一些php脚本，它将一个新行添加到mychar字段中保存在MYSQL中的字符串中。
当我使用mysqladmin查看数据库时，我可以看到有多行的字段。他们不显示任何字符。创造新线条的东西是看不见的。
但是，当我尝试使用包含额外行的字符串更新现有字符串时，它会使用\n将字段更新为空。我猜这是因为mysql在update语句中不接受\n。
谁能建议如何在PHP中准备一个字符串，以便在更新MYSQL中的字段时，它可以正确地更新(即用新行)。似乎不起作用。
$sql = "UPDATE comments SET comment = 'firstline\nsecondline
浏览 3提问于2018-03-17得票数 1
回答已采纳
我正在查看React文档，它提到
--如果您熟悉React类生命周期方法，可以将useEffect Hook看作是componentDidMount、componentDidUpdate和componentWillUnmount的组合。
假设我现在有一个类组件，在componentDidMount中，我正在做这样的事情
componentDidMount() {
MapboxGL.setTelemetryEnabled(false);
}
据我所知，组件在生命周期中只被调用一次吗？
如果我用的是“反应钩”，那就像这样
useEffect(() => {
Ma
浏览 3提问于2020-05-29得票数 5
我不太明白什么时候“挂载”的反应，什么时候触发useEffect和清理功能。
在下面的例子中。看来useToggle挂钩是“保税”(正确的术语？)对于App，每次变量isOn被更新时，绑定的App组件都会被重新呈现。但是，清理函数也会被调用。我试着比较它以响应类组件的生命周期。
如果我的理解是错误的，请纠正我。
参考:来自的编辑图表
生命周期的useEffect(updateFunc => cleanupFunc, [dependency array])
const { useReducer, useEffect } = React;
// Purposefully move
浏览 4提问于2020-10-16得票数 2
回答已采纳
我在React Native应用程序中尝试获得准确的计时时遇到了一个问题。下面是我的问题的一个基本版本。 我可以通过使用setTimeout让它工作，但是它不准确，我正在尝试使用useTimer，这是一个精确的计时器。但是，当我在useEffect中而不是在组件主体中创建计时器时，我得到了一个Invalid Hook Call, Hooks can only be called inside the body of a function component 正在努力寻找解决这个问题的方法。 import React from "react";
import { View, T
浏览 84提问于2021-08-29得票数 0
我想模拟在useEffect钩子中获取数据，但我收到警告: React hook useEffect缺少一个依赖项：'fetchData‘。
因为我只想调用这个fetch函数一次，所以它应该工作得很好。你能帮帮我吗?
我从本地数组“获取”数据
const people = [
{ id: 1, name: 'Alex' },
{ id: 2, name: 'Ben' },
];
//useState hook where I want to keep fetched data
const [data, setData] = use
浏览 11提问于2021-06-14得票数 0
如何将componentDidMount()、componentWillReceiveProps(nextProps)更改为useEffect？我就是搞不懂。
下面这个是我的代码，不用钩子。从减速机获得this.props.auth。
componentDidMount() {
if (this.props.auth.isAuthenticated) {
this.props.history.push('/main');
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.auth
浏览 5提问于2022-09-02得票数 1
回答已采纳
我理解，useEffect需要依赖项数组中的依赖项，但是当我将其与useState结合时，将有一个无限循环：
const [valid, setValid] = useState(false);
useEffect(() => {
setValid(true);
}, [valid]};
这就是为什么我用它就像：
useEffect(() => {
setValid(true);
}, []};
因此，我得到：
React Hook useEffect has a missing dependency: 'setValid'.
我怎么才能摆脱警告呢？
浏览 4提问于2021-03-14得票数 0
回答已采纳
我使用useState Hook将API数据存储到数组中。当数据第一次呈现时，我得到一个空数组，在第一次呈现之后，我能够获得数据。
实际上，我试图创建一个基于数据库中的数字数据行的动态选择下拉列表。
const Groups = () => {
const [userList, setUserList] = useState();
useEffect(() => {
(async () => {
const response = await fetch(
"https://localhost:44316/api/auth/
浏览 6提问于2021-07-05得票数 0
回答已采纳
，我在Django中创建了一个API，用于获取React应用程序中的TODO任务，但是当我在useEffect Hook的依赖数组中使用allTasks of useState时，它就开始发送没完没了的get请求。我不明白这种情况是如何发生的，如果我将依赖数组保持为空，那么它就能正常工作，但是如果背景中的数据发生了一些变化，我必须手动刷新页面。
下面是Tasklist.js组件的代码
import React,{useState, useEffect} from 'react'
import axios from 'axios'
import Task f
浏览 5提问于2021-08-13得票数 0
嗨，我在学习反应，当我做这个例子的时候，我有一些奇怪的东西。这段代码是将get请求发送给newsapi，并接收结果。我用的是定制的钩子。
// *** this is where I use custom hook. "usePromise" is custom hook. *** //
function NewsList({ category }) {
const [loading, response, error] = usePromise(() => {
console.log("how many will it run?")
c
浏览 6提问于2022-04-04得票数 0
2回答
我是React.js的新手。我想根据其他状态更新表单中的选项，我调用api来获取新的选项。因此，每当发生状态更改时，都需要调用此api。
const [selectedNamespace,setselectedNamespace] = useState[default];
每当selectedNamespace更改时，我都需要调用fetchData api。
const fetchItemData = useCallback(() => {
setError(null);
setSuccessMessage(null);
fetch(ge
浏览 5提问于2021-05-18得票数 2
回答已采纳
1回答
目前，我只是简单地在useEffect钩子中调用它，而不是将它作为依赖项，因为我只想让它运行一次。然而，这给了React Hook useEffect has a missing dependency: 'dispatch'.我是否应该将调度添加到依赖项中，或者是否有更好的做法？ useEffect(() => {
dispatch(handleGetUser());
}, []);
浏览 11提问于2020-04-27得票数 0
回答已采纳
我正在尝试基于表单提交在功能组件中进行API调用：
const SearchForm = () => {
const [keywords, setKeywords] = useState('')
const [fetchedData, setFetchedData] = useState('')
const handleSubmit = (e) => {
e.preventDefault();
useEffect(() => {
async function fe
浏览 1提问于2020-06-08得票数 11
回答已采纳
3回答
我正在开发一个react原生应用程序。
在我的主组件中，我使用了一个UseEffect钩子来将数据库响应存储在一个“食物”变量中。然后，我将使用此变量中包含的数据创建一个列表。
这就是我的钩子：
const [ food, setFood ] = useState([]);
const [listData, setListData] = useState([]);
const load_food = async () => {
db.listProduct().then(row => setFood(row))
setListData(
Arra
浏览 7提问于2020-06-21得票数 0
我有一个月的选项数组，我在useEffect中使用它，但是得到了deps的警告。请指导如何使用useMemo。我收到了如下警告：“options”数组使useEffect Hook (在第83行)的依赖项在每次呈现上发生变化。要解决这个问题，请将“选项”的初始化封装在它自己的useMemo Hook react钩子/详尽-deps中。
const options = [];
useEffect(() => {
if (financialMonth) {
options.forEach((item) => {
if (Number(item.value) =
浏览 3提问于2021-12-17得票数 2
回答已采纳
这是我的React js代码的一部分：
export default function Registration() {
const [email, setEmail] = useState(null);
const [password, setPassword] = useState(null);
const [passwordRepeat, setPasswordRepeat] = useState(null);
const [isFieldsOK, setFieldsOK] = useState(false);
useEffect(() =>
浏览 2提问于2021-01-10得票数 2
我不确定通过在依赖数组周围使用useEffect，这是否是一个有效的警告，似乎每当useEffect中的变量、方法或分派发出警告时，React都缺少依赖项：“active”、“retrieveUser”和“分派”。或者包括它们，或者删除下面示例中的依赖数组，如果我只是将它保留为空白数组来执行componentDidMount功能
useEffect(() => {
setActive(active);
await retrieveUser(param1, param2);
dispatch(someAction);
}, []). // warnin
浏览 2提问于2020-08-01得票数 1
回答已采纳
1回答
我有一个名为useIsUserSubscribed的自定义钩子，它检查是否订阅了特定的用户。如果用户被订阅，则返回true，如果用户没有订阅，则返回false .
import { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import { checkSubscription } from "../services";
// this hook checks if the current user is subscribed to
浏览 4提问于2021-11-24得票数 0
回答已采纳
我需要将项连接到存储在React组件状态中的数组。我有一个关于stackblitz的例子，我不明白为什么数组没有增长，因为我使用扩展运算符来添加元素来连接现有的数组。感谢您的任何帮助 链接：https://stackblitz.com/edit/react-usestate-example-ebzt6g?file=index.js import React from 'react';
import { useState, useEffect } from 'react';
import { render } from 'react-dom';
浏览 44提问于2020-04-17得票数 1
回答已采纳
我有一个警告：
React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-deps
使用此代码：
import { useDispatch } from 'react-redux';
import openSocket from "socket.io-client";
import {populateCustomers} from '.
浏览 7提问于2021-03-12得票数 2
回答已采纳
我刚开始学习React (没有后端，有上下文API)。在上下文提供者中，我正在寻找一种方法来从相同的数据中设置两个Hook状态。进行一次axios调用(无需重新渲染)。提供者接收App。有什么解决方案吗？ export const Context = React.createContext();
const MoviesProvider = ({ children }) => {
console.log("Context Affectations");
const [movies, setMovies] = React.useState(null);
c
浏览 26提问于2021-04-02得票数 0
回答已采纳
如何修复此警告？ React Hook useEffect缺少依赖项：'loading‘。要么包含它，要么删除依赖数组react-hooks/exhaustive deps。 useEffect(() => {
if (!loading && data) {
dispatch(action.TODO(data));
}
}, [data, dispatch]);
浏览 32提问于2021-04-21得票数 0
回答已采纳
我需要在useEffect()中获取一个api。我尝试这样做，它抛出了以下错误：Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
我的代码如下：
-Api，我需要获取：
export const fetchMyApi = async (code) => {
const { data } = await useQuery("data", () =>
clientAPIs.getData(code)
);
ret
浏览 4提问于2021-07-22得票数 2
回答已采纳
React Hook useEffect has a missing dependency: 'match.params.id'. Either includes it or remove the dependency array, this is the error I continuously get while using useEffect
useEffect(() => {
const fetchData = async () => {
let data = await getPost(match.params.id);
浏览 6提问于2022-03-16得票数 0
3回答
为什么我的useEffect会发生两次，它会搞乱我的代码：
useEffect(() => {
axios
.post("/register", {
fullname,
username,
email,
password,
})
.then((response) => {
setMessage(JSON.stringify(response.data.success));
console.log(message);
if (message === "true") {
se
浏览 2提问于2022-08-17得票数 0
1回答
我有一个防火墙数据库，它有一个名为" post“的集合，在post中有6个变量(displayName、userName、验证、文本、图像、化身)。其想法是，数据库中将有多个帖子。
反应守则：
const [posts, setPosts] = useState([]);
//Whenever the firebase database changes, it runs this method
useEffect(() => {
db.collection("posts").onSnapshot((snapshot)
浏览 2提问于2021-02-06得票数 0
回答已采纳
在我的React应用程序中，我有一个redux存储，它包含弹出状态，具有以下模型：
stateFilter: {
visible: false
}
在我的页面上，我得到了弹出的状态：
const mapStateToProps = ({ list }) => ({
visible: list.stateFilter.visible
});
我想查询一个数据库，以便使用状态变量进行筛选。我只想在弹出窗口接近时在我的动作中运行这个函数。为此，我利用了useEffect钩子：
useEffect(() => {
if (!visible) {
se
浏览 5提问于2021-08-27得票数 1
正如标题中所示，在useEffect钩子中调用API请求时，依赖数组中有多个道具被认为是坏习惯，甚至是反模式？
举个例子：
useEffect(() => {
dispatch(fetchUsersLocation); // action that calls API
}, [users, location, fetchUsersLocation, someOtherProp]);
因此，我们不是监听某些事件，例如click或调用componentDidMount上的操作(传递空依赖数组)，而是侦听users更改，甚至是location等等。
谢谢
浏览 0提问于2021-05-17得票数 0
回答已采纳
我在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钩子调用中，当api响应被更新为状态时，它将进入无限循环，但无限数组将在控制台中打印
//Initial state
const items : IFreinds [] = [];
export default function FreindsList()
{
let [items1, setItems] = useState(items);
// hook call
useEffect( () => {
let list = FriendsService.getFriends(id);
list.then(
浏览 4提问于2020-05-25得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
