为什么当我更新一个useState时，它没有调用它(react hooks)就更新了另一个？
当你更新一个useState时，它没有调用它(react hooks)就更新了另一个的原因可能是由于React的渲染机制和函数组件的特性导致的。
在React中，useState是一种React Hook，用于在函数组件中添加状态。当你调用useState时，它会返回一个状态值和一个更新该状态值的函数。当你调用这个更新函数时，React会重新渲染组件，并将新的状态值应用到组件中。
然而，由于函数组件的特性，每次组件重新渲染时，函数组件内部的所有代码都会重新执行一遍。这意味着每次重新渲染时，useState都会被调用，返回一个新的状态值和更新函数。
如果在函数组件中存在多个useState调用，每个useState都会返回一个独立的状态值和更新函数。当你调用其中一个更新函数时，React会重新渲染组件，并将新的状态值应用到组件中。但是，由于函数组件的重新执行特性，其他的useState调用也会被重新执行，返回新的状态值和更新函数。
这就可能导致当你更新一个useState时，它没有调用它就更新了另一个的情况。因为在函数组件重新渲染时，所有的useState调用都会被重新执行，返回新的状态值和更新函数，而不仅仅是被调用的那个useState。
为了解决这个问题，你可以使用React的useEffect Hook来控制useState的更新。useEffect可以让你在组件渲染完成后执行一些副作用操作，比如订阅事件、发送网络请求等。通过在useEffect中指定依赖项数组，你可以控制副作用操作的触发时机。
例如，你可以在useEffect中指定依赖项数组为被更新的useState，这样只有当被更新的useState发生变化时，useEffect才会执行。这样可以避免不必要的重新渲染和更新。
总结起来，当你更新一个useState时，它没有调用它就更新了另一个的原因是函数组件的重新执行特性导致的。为了解决这个问题，你可以使用React的useEffect Hook来控制useState的更新时机。
相关·内容
1回答
为什么useEffect中的警报在函数组件中的返回语句中在控制台之前运行？
javascript、reactjs
根据react，如果我们不在useEffect钩子中指定第二个参数，它的行为将类似于componentDidMount和componentDidUpdate
通过使用useEffect Hook，您可以告诉React您的组件需要在呈现- 之后执行一些操作。
useEffect在每次渲染之后运行吗？是的！默认情况下，它在第一次呈现之后和每次更新之后运行。
这意味着在这两种情况下，useEffect将在初始呈现之后和更新之后运行。
import { useState, useEffect } from "react";
export default function A
浏览 2提问于2021-03-24得票数 0
回答已采纳
2回答
为什么useState会导致多次重新渲染
reactjs
我正在调查为什么useState原因会像下面的应用程序或那样渲染这么多次
import React from "react";
export default function App() {
const [name, setName] = React.useState("unknown");
console.log("render...", name);
React.useEffect(() => {
const doIt = async () => {
await new Promise(res =
浏览 0提问于2020-07-16得票数 0
2回答
React钩子说明了如果我需要更新2个依赖变量，如何只执行一次副作用函数
javascript、reactjs、react-hooks
假设我有以下使用react钩子的组件
const Component = (props) => {
[state1, setState1] = useState();
[state2, setState2] = useState();
useEffect(()=>{
// use state1 and state2 as param to fetch data
...
}, [state1, state2])
onSomethingChange = () => {
setState1(...);
浏览 17提问于2020-02-20得票数 2
回答已采纳
2回答
与基于类的方法相比，使用Hooks设置状态后重新呈现有什么不同？
javascript、reactjs、react-hooks
类组件
在React类组件中，我们被告知setState 总是会导致重呈现，而不管状态是否实际更改为新值。实际上，组件将在状态更新到之前相同的值时重新呈现。
除非setState()返回false，否则shouldComponentUpdate()总是会导致重呈现。
钩子(功能组件)
但是，使用钩子，文档指定将状态更新为与前一个状态相同的值，not将导致(子组件的)重呈现：
退出状态更新
如果您将状态挂钩更新为与当前状态相同的值，则React将在不呈现子状态或触发效果的情况下退出。(React使用Object.is比较算法。)
密切相关的问题
类组件中的this.s
浏览 0提问于2019-03-27得票数 35
回答已采纳
2回答
直接在组件体中将状态更新为同一状态
javascript、reactjs、react-hooks、infinite-loop、react-component
假设我有一个简单的虚拟组件：
const Component = () => {
const [state, setState] = useState(1);
setState(1);
return <div>Component</div>
}
在这段代码中，我将状态更新为，与前面直接在组件体中的值相同。但是，即使值保持不变，这也会导致太多的重呈现。
正如我所知，在React.useState中，如果状态值被更新为与前面相同的值- React将不会重新呈现组件。为什么会发生在这里？
然而，，如果我尝试使用useEffect做一些简单的事情，而不是
浏览 14提问于2022-10-11得票数 7
回答已采纳
9回答
反应: useState还是useRef？
reactjs、react-hooks
我在“useState()”网站上读到了React useState()和useRef()的内容，我对一些似乎同时有useRef和useState解决方案的用例感到困惑，我不知道哪种方法是正确的。
来自“钩子常见问题”的
“useRef() Hook不仅适用于DOM参考文献，”ref“对象是一个通用容器，其当前属性是可变的，可以保存任何值，类似于类上的实例属性。”
使用useRef()
function Timer() {
const intervalRef = useRef();
useEffect(() => {
const id = setInterval
浏览 0提问于2019-06-05得票数 129
回答已采纳
4回答
为什么更新后的状态变量没有显示在浏览器控制台中？
reactjs
我知道useState返回的方法是异步的，但是，当我运行这段代码时，我将console.log延迟最多5秒，但是它仍然记录前一个值，而不是状态变量的更新值。更新后的值是2，但它仍然是日志1。然而，在工具中，我可以看到当我按下按钮时状态会发生变化，尽管我很想知道为什么在这样的延迟之后控制台会打印一个过时的值？这不是类组件和setState的情况，而是函数组件和useState的情况。
import "./App.css";
import React, { useState, useEffect } from "react";
function App() {
浏览 16提问于2022-08-23得票数 1
2回答
使用TypeScript - React检测到了ComponentName调用的钩子顺序的变化。
reactjs、typescript、react-hooks、react-typescript、tsx
我正在和用户一起做一个项目。现在我正在和UserProfile一起工作
这就是我所收到的错误。
React has detected a change in the order of Hooks called by UserProfile
Previous render Next render
------------------------------------------------------
1. useState useState
2. useContext
浏览 7提问于2022-05-07得票数 2
回答已采纳
1回答
ReactJS :无效钩子调用。只能在函数组件的主体内调用钩子。
javascript、reactjs
在我的一个子方法上调用useEffect函数时，结果是
ReactJS :无效钩子调用。钩子只能在函数组件的主体内调用。
流
onClick(message) --> call CallGetAMIDetails(message) --> Call Loaddata(message) --> Perform REST Call and -->Returns Array of String
但是我的类已经是一个函数组件了。
import React, {useEffect, useState} from 'react';
import {Dashb
浏览 2提问于2021-08-16得票数 0
回答已采纳
1回答
如何在绘制功能组件时正确地产生副作用？
reactjs、react-hooks
我读过，副作用应该转到useEffect，但这立即阻止我调用useEffect内部的钩子，因为。
副作用出现在不同的地方(类中的生命周期方法，或功能组件中的useEffect )。
然而，在我看来，Child在其Parent上触发一个函数是相当普遍的，例如，从一个子Button中触发一个onClick。另一方面，onClick可能会产生副作用，比如改变Parent的状态，这可能会对父和子的呈现产生副作用。
将这些方法称为“天真地”只给了我错误“不能在呈现不同组件(Parent)的同时更新组件(Child)"，尽管我在这里的目标不是解决该错误，而是了解如何在呈现过程中应用副作用。
浏览 4提问于2020-04-28得票数 0
4回答
用useEffect进行强制重呈现
reactjs、react-hooks
import * as React from "react";
// import "./style.css";
export default function App() {
let [width, setWidth] = React.useState(window.innerWidth);
let [height, setHeight] = React.useState(window.innerHeight);
React.useEffect(() => {
console.log("us
浏览 14提问于2022-11-17得票数 2
1回答
反应警告- useEffect缺少一个依赖项
javascript、reactjs、react-hooks、use-effect
这是我的组成部分：
const FooComponent = () => {
const initFoo = {
attrOne: '',
attrTwo: '',
attrThree: '',
};
const fooContext = useContext(FooContext);
const { addFoo, hasFoo, currentFoo } = fooContext;
const [foo, setFoo] = useState(ini
浏览 3提问于2021-05-24得票数 0
回答已采纳
2回答
在反应中，发电机的调用比预期的要多。
javascript、reactjs
我发现了一种行为，在这种情况下，生成器似乎被调用了两次。
下面是一个简单的代码，它从生成器获取一个数字并输出到控制台。它期望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
回答已采纳
2回答
究竟什么是重新呈现和useState钩子的流程？
reactjs、react-hooks、use-state
我正在学习react，我理解了useState和useEffect钩子的流程(它们是如何重新呈现组件的)，以及重新呈现组件到底意味着什么(整个函数将再次运行，或者它是如何发生的)，.I在下面附加了一个演示代码--如果在这种情况下解释这些钩子是如何工作的，那就太棒了。
const [myNumber, setMyNumber] = useState(0);
let inc2=1;
function increment() {
setMyNumber(myNumber + 1);
inc2++;
console.log(inc2);
}
return (
<div>
<
浏览 2提问于2022-07-13得票数 0
回答已采纳
2回答
useEffect被多次调用
reactjs、react-redux
当我将addData或updateData添加到useEffect数组中时，它会被调用无限次，但我认为它应该只在单击按钮时调用。
import axios from 'axios'
import { Button, TextField } from '@material-ui/core'
import React,{useState,useEffect} from 'react'
import { useDispatch, useSelector } from 'react-redux'
import Applebar from
浏览 0提问于2021-02-13得票数 1
5回答
反应钩子渲染两次
javascript、reactjs、react-hooks、rerender
我定义了一个场景:我们有一个组件，它使用父级的道具和它本身的状态。
下面有两个组件DC和JOKER以及我的步骤：
单击DC的按钮
直流setCount
小丑会用旧的状态渲染
运行useEffect和setCount
小丑确实会再次渲染
我想问为什么小丑渲染两次(步骤3和步骤5)，而第一次呈现浪费了表演。，我只是不想要第3步。如果在类组件中我可以使用componentShouldUpdate来避免它。但是胡克斯也有同样的东西吗？
下面是我的代码，或者打开这个网站
import React, { PureComponent, useState, useEffe
浏览 4提问于2019-10-29得票数 21
3回答
何时为什么要useEffect
javascript、reactjs、react-hooks
这似乎是一个奇怪的问题，但我并没有真正看到useEffect的许多用例在React中(我目前正在开发几千行React代码基，而且从未使用过它一次)，而且我认为可能有一些东西我没有完全掌握。
如果您正在编写一个功能组件，那么将您的“效果”代码放在一个useEffect钩子中与简单地在该功能组件的主体中执行它有什么不同(在每次呈现时也会执行它)？
典型的用例是在挂载组件时获取数据:我看到了两种方法，一种是使用useEffect，另一种是没有：
// without useEffect
const MyComponent = () => {
[data, setData] = useS
浏览 7提问于2020-01-26得票数 5
回答已采纳
2回答
为什么我的React组件在控制台中呈现多个时间？
javascript、reactjs、react-hooks、web-frontend
我的反应是新的。我创建了两个文件App.js和UseEffect.js，我正在学习如何使用函数的生命周期。所以当我在控制台中看到时，这是多次渲染。你可以在下面看到我的照片。
这是我的密码
UseEffect.js
import React, {useState, useEffect} from "react";
function MyFunction(){
console.log('-> Function Init')
const [count, setCount] = useState(0)
const handleCount = () =>
浏览 2提问于2022-07-15得票数 1
1回答
从useEffect和其他函数调用函数
javascript、reactjs、use-effect
我有一个子组件，它通过一个事件向父组件发出一个操作：
子组件：
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
回答已采纳
1回答
在上下文更新中重新安装组件
reactjs、react-native、react-context、react-native-navigation
我一直试图使用react上下文更新应用程序上几个屏幕使用的全局状态，这似乎是我找到的建议。
然而，每次在屏幕中更新上下文时，它都会再次卸载和挂载。我怎么才能防止这件事？
。如果单击该按钮，您将从我的useEffect中看到一个新的控制台日志。
代码如下：
import React, {
useContext,
useState,
useEffect,
createContext,
Dispatch,
SetStateAction
} from "react";
import { Button } from "react-native";
浏览 4提问于2022-04-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
