重新呈现React useState而不更新状态
React useState是React框架中的一个钩子函数，用于在函数组件中添加状态。它接受一个初始值作为参数，并返回一个包含当前状态值和更新状态值的数组。
在使用React useState时，如果想要重新呈现组件而不更新状态，可以通过使用一个中间变量来实现。具体步骤如下：
- 在组件中声明一个中间变量，用于保存状态的值。
- 使用useState钩子函数初始化状态，并将初始值设置为中间变量的值。
- 在组件的JSX中使用中间变量来展示状态的值。
- 当需要重新呈现组件时，不更新中间变量的值。
这样做的好处是可以重新渲染组件，但不会触发状态的更新，从而避免不必要的渲染和性能损耗。
下面是一个示例代码：
import React, { useState } from 'react';
const MyComponent = () => {
const [state, setState] = useState('initial value');
const intermediateValue = state; // 中间变量
const handleClick = () => {
// 更新中间变量的值
intermediateValue = 'new value';
};
return (
<div>
<p>State value: {intermediateValue}</p>
<button onClick={handleClick}>Update State</button>
</div>
);
};
export default MyComponent;在上述示例中，当点击"Update State"按钮时，中间变量intermediateValue的值会被更新为"new value"，但状态state的值不会改变。这样，组件会重新呈现，但不会触发状态更新。
需要注意的是，这种做法可能会导致组件的行为不可预测，因为React无法感知到状态的变化。因此，建议在大多数情况下，使用useState来管理状态，并让React自动处理组件的重新渲染和状态更新。
相关·内容
下面是我的代码：
function State(){
var [msg,set_msg]=React.useState("hello") //not rendered, just to force render
var [data,set_data]=React.useState({version:1})
function onClick(){
set_msg(x=>x+'x') //just to force render
data.version+=1 //changing state in place, but it still
浏览 0提问于2021-01-13得票数 2
回答已采纳
以下是代码：
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
回答已采纳
1回答
在下面的程序中，当我单击任何按钮时，另一个按钮也会重新呈现，即使我已经使用了React.memo()。此外，只有其他按钮得到重新呈现，而不是其他计数。为什么？我有这样一个父组件：
import React, { useState } from 'react'
import Count from './Count'
import Button from './Button'
import Title from './Title'
function ParentComponent() {
const [age, setAge
浏览 2提问于2021-01-25得票数 1
我有这个口袋妖怪api应用程序，它有一些问题，首先，当我获取口袋妖怪，它不断添加无限x口袋妖怪与1请求。其次，当我再次尝试输入一些东西时，这个应用程序就会完全冻结。代码如下：
应用程序：
import React from 'react'
import './App.css'
import {PokemonForm} from '@components/PokemonForm/PokemonForm'
import {PokemonProvider} from "@context/PokemonContext";
import {
浏览 1提问于2022-10-27得票数 0
回答已采纳
2回答
import React, { useState } from "react";
function App() {
const [name, setName] = useState("");
const [headingText, setHeadingText] = useState("");
function handleChange(event) {
// console.log(event.target.value);
setName(event.target.value);
}
function
浏览 15提问于2021-05-22得票数 0
据我所知，FlatList extraData属性用于在组件发生更改时重新呈现组件。
所以，想象一下这个例子：
import React from 'react';
import { View, TouchableOpacity, Text, FlatList } from 'react-native';
export default function App() {
const [selectedId, setSelectedId] = React.useState(null);
const items = [
{
id: &#
浏览 3提问于2021-11-11得票数 1
1回答
我想实现子程序的排序功能，其中道具是通过一个axios调用从父函数传入的--我应该吗？
在子useState中存储道具
从道具传入父setState来实现这一点？
假设我不需要父母重新排序，我的想法是1可能更有利-只是我不确定在setState中存储道具是一种常见的模式。
第一个案例() -在子useState中存储道具
父母jsx
import { useEffect, useRef, useState } from "react";
import "./styles.css";
import Child from "./Child&#
浏览 4提问于2022-05-22得票数 0
一旦我向"setTitle“添加了一个对象，我就会得到一个错误。在"useState()“中设置对象是可行的。
import React, { useState } from "react";
export default function App() {
const [title, setTitle] = useState({});
setTitle({
"somthing": "dfgsf"
});
return <p>df</p>;
}
太多的重新呈现。React限制呈现的数
浏览 1提问于2020-12-21得票数 2
回答已采纳
我正在学习ReactJS，我对使用Hook ( useState )有疑问。我想要创建一个javascript函数，该函数将值存储在( useState )中，该参数将在函数中接收。我调用了函数并传递了我想要保留的字符串。我的愿望是在我的HTML页面上显示存储在( useState )中的值。
我的代码index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App /&g
浏览 1提问于2021-09-28得票数 0
回答已采纳
1回答
当我创建一个函数来返回一个在function中的JSX输入字段时，光标会在每个键上失去焦点，这意味着我可以输入一个字符，然后我必须再次单击输入字段才能输入另一个字符，有人能解释一下发生了什么事情吗?我如何防止这种情况或在function中这样做是不可取的？我的代码：
import React, {useState} from 'react';
export default function App(props) {
const [value, setValue] = useState();
const Show = () => {
return
浏览 2提问于2020-05-22得票数 0
回答已采纳
只是想做动态模态。当我单击按钮时，它可以工作，但不会立即设置状态。首先，console.log返回空数组。其他人工作正常。
//状态和处理程序
const [showModal, setShowModal] = React.useState([])
const handleModal = (id) => {
const modalData = data?.filter((item) => item.id == id )
setShowModal(modalData)
console.log(showModal)
}
console.log(showMod
浏览 1提问于2022-07-06得票数 -1
回答已采纳
我有一个具有布尔状态的简单函数组件。和按钮来改变状态。
它最初被设置为true，所以当我按下true-按钮时，它不会呈现。
但是如果我按下false按钮，它就会重新呈现，如果我再次按false按钮，即使状态已经设置为false，它也会重新呈现。
有人能解释一下，当状态改变到完全相同的状态时，组件为什么会重新呈现？如何防止它重新呈现？
import React, {useState} from 'react';
const TestHooks = () => {
const [state, setState] = useState(true);
conso
浏览 3提问于2019-09-09得票数 9
回答已采纳
在这种情况下，我将为子组件发送相同的属性和状态，所以...为什么没有在没有React.memo()的情况下重新渲染，并且这些日志只显示了一次？
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
const Child = ({ num }) => {
const [count, setCount] = useState(0);
return (
<>
{console.log('Child render
浏览 1提问于2020-11-04得票数 0
import React,{useState} from "react"
const Pagination = ()=>{
const [pageCount, setPageCount] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(10);
const [itemOffset, setItemOffset] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const [data, se
浏览 6提问于2022-09-03得票数 0
我想更好地理解为什么在下面直接调用的函数中更新状态会导致函数在无限循环中运行。 我知道如果我想在挂载后立即更新状态，我应该使用"useEffect“，但我想知道为什么会发生这个无限循环背后的机制。 我尝试删除更新状态的函数调用，可以看到它不再在无限循环中运行。 import React, { useState } from "react";
const App = () => {
const [tasks, setTasks] = useState();
const getSheetData = text => {
setTasks(te
浏览 24提问于2019-09-08得票数 0
我编写了以下简单的代码
import React, { useState, useEffect } from "react";
export default function App() {
const [count, setCount] = useState(1);
useEffect(() => {
setCount(2);
}, [count]);
console.info("render: ", count);
return <div>{count}</div>;
}
控制台输出为
rend
浏览 3提问于2022-03-21得票数 2
回答已采纳
我正在制作一个计算器，在react中，我为数字制作了按钮，当按下按钮"7“时，在输入字段中添加了7。
我的方法：
我正在使用useState来完成这个任务。我制作了一个箭头函数funinpval，它在参数中以数字作为字符串，然后通过传递相应的数字作为参数，使用这个函数使用不同的按钮onclick处理程序。但我错了
import React from 'react'
import { useState } from 'react';
export const Calculator = () => {
const [inpval,
浏览 6提问于2021-08-29得票数 1
回答已采纳
2回答
import React, { useState, useEffect } from 'react';
const Test = () => {
const [ count, setCount ] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Count up!</button>
<ChildComponent />
浏览 11提问于2019-12-19得票数 0
2回答
我想要一些帮助，请理解为什么下面的代码导致inf呈现循环。在我看来，这应该是一个循环：
渲染容器。
渲染子StrRow。
第一次运行效果并调用update()。
更改容器状态。
重新渲染容器。
重新渲染StrRow.
由于依赖项没有更改，不会再次运行。
然而，这种效果似乎是在StrRow的每次呈现之后运行的。
function Container() {
const [count, setCount] = React.useState(0);
const update = React.useCallback(() => {
浏览 3提问于2020-05-06得票数 0
回答已采纳
2回答
多次响应useEffect呈现
、、、、
我是新来的胡克斯。我用componentDidMount编写了一个项目。
现在我正在学习钩子，用钩子重写这个项目。我想先获取数据并在控制台上打印出来。
然而，它呈现3次。这可能是因为我在useEffect中使用了2 setState。但是，在其中一种方法中，我将数据设置为数据数组，而在另一种情况下，我保留了spinner控件的加载值。如何使用useEffect (如componentDidMount )只需一次就可以提取数据并设置状态？
当我将控制台写入useEffect时，"React缺少一个依赖项：‘data’“。警告并返回空列表。
顺便说一下，我删除了严格模式。
import R
浏览 3提问于2020-12-06得票数 0
回答已采纳
1回答
我正在尝试学习新的React钩子。我已经编写了一个简单的todolist，用户可以输入输入来创建新的待办事项，然后单击待办事项将其删除。但是，在删除待办事项后，它不会重新呈现。
以下是我的代码
import React, { useState, Fragment } from "react";
const Todo = () => {
const [inputVal, setInput] = useState("");
const [list, setList] = useState([]);
const handleInput = e =&
浏览 0提问于2020-01-14得票数 0
1回答
每次单击increment按钮时：
期望:当前count已记录
实际：count的初始值，即记录为3
import React, { useState, useEffect } from "react";
function SomeLibrary(props) {
const [mapState, setMapState] = useState(undefined);
useEffect(() => {
console.log("setting map");
// Run exactly once at mount of com
浏览 1提问于2020-07-22得票数 1
我目前正在一个预订座位的网站上工作。我希望向其添加一个事件侦听器，以便当它被单击时，它可以调用将存储div值的函数。但是，每当我在网站的整个内容中添加onClick事件时，都不会显示(只显示一个空白页面)。我的密码有什么问题吗？而且，我对此反应很新，如果可能的话，你们能解释一下你们的答案吗.？
这是我的密码
import React, { useState } from "react";
const Ticketing = () => {
const [seat1, selectSeat1] = useState();
const [seat2,
浏览 3提问于2022-08-27得票数 1
4回答
反应状态没有得到更新
、、、、
在这里，我需要在控制台中获得更新的输入状态，但是我得到一个错误，当输入中有什么内容时，setSavedinput是不定义的。
import "./styles.css";
import React, { useState } from "react";
import ReactDOM from "react-dom";
const blankinput = () => {
const [savedContent, setsavedContent] = useState("");
};
const onChangeHa
浏览 6提问于2021-09-05得票数 0
回答已采纳
2回答
我想使用UseState将聊天屏幕分割为容器和演示者。但是我已经经历了两天太多的渲染问题了。 这是Container.jsx import React, { useState } from "react";
import ChatsPresenter from "./ChatPresenter";
const ChatContainer = () => {
const [title, setTitle] = useState({
user: [""],
});
const [loading, setLoading]
浏览 91提问于2020-12-11得票数 1
回答已采纳
因此，React有UseState钩子，我们应该这样使用它。
const [value, setValue] = useState(0);
如果我们想要改变一个值，它应该写成这样：
const increase = () => {
setValue(value + 1)
}
为什么不可能这样写？为什么我们需要setValue？
const increase = () => {
return value + 1;
}
我知道这是行不通的，但我找不到解释为什么会这样。
浏览 8提问于2022-11-05得票数 1
回答已采纳
我在用react做计算器。每次我按数字按钮时，整个应用程序都会重新呈现，而不是<Display />。
为了防止这种情况，我尝试了两种不同的应用程序方法，但它们都不起作用。
任何帮助都将不胜感激。
将clickHandler放在useCallback()中
const App = () => {
const [screen, setScreen] = useState("0");
console.log("render");
const clickHandler = useCallback(
(val) =&g
浏览 3提问于2022-03-03得票数 0
1回答
我基本上试着用City值来设置状态，但是当我设置你的状态和控制台日志时，状态总是空的。我甚至在这条路上记录了控制台。
示例城市对象来自first console.log：{_id：'625a495ae4bea1099502f824'，城市：'Dakhla‘国家：’埃及‘}
import React from "react";
import { useState } from "react";
export default function Cities() {
const [singlecity, setSingleCity]
浏览 10提问于2022-04-19得票数 0
3回答
我正在使用React，Typescript，React-bootstrap和一个自制的API创建一个webshop。在导航栏中，我希望动态显示用户购物车中的产品数量(如果购物车中有2个产品，则显示Cart(2) )。现在，我正在使用useEffect从我的API中获取购物车中的产品数量，但当然，useEffect只在页面重新呈现时触发-这意味着当我添加或删除产品时，它不会反映在购物车中(？)数。
我的导航栏是一个(功能)组件，而我的产品选择也是单独的功能组件
如何实现导航栏购物车中的数字(？)将产品添加到购物车时进行更新。
下面是导航栏中的完整代码。
提前感谢！
import Navbar f
浏览 0提问于2021-06-02得票数 0
我在“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
回答已采纳
当组件useState更新时，我希望在Home函数中从组件中获得相同的值，并且Home不应该重命名。
import { useState, useEffect } from "react";
function Component() {
const [count, setCount] = useState(0)
useEffect(() => {
console.log("rerender")
})
useEffect(() => {
let interval = setInterval(() => {
浏览 6提问于2022-11-10得票数 0
回答已采纳
我正在做一个反应小训练应用程序使用钩子。下面是一个示例:有一个MainPage.js，它有3个类似的子组件Card.js。我在MainPage中有全局状态，每一张卡都有自己的本地状态。每张卡都有来自MainPage和clickButton func的道具"id“。
当我点击任何卡片上的按钮时，有两个操作：
局部变量“点击”变为真。
调用父组件的函数并将值设置为全局状态变量'firstCard‘。
每个文件都包含用于测试的console.log()。当我单击该按钮时，它会显示实际的全局变量"firstCard"，以及3倍的false(在Card中显
浏览 0提问于2021-01-25得票数 1
我用的是反应。我正在使用材料表来获取可编辑表的数据。但是我得到了一个像图片一样的错误，我如何纠正这个错误呢？
我使用useState作为表的编辑设置。请你帮我处理一下错误好吗？
在接收数据时，我不会收到任何错误。我只使用表上的编辑作为活动/非活动。forceUpdate = useState (假)，setData = useState (drBounty)；
给出了行的错误。
错误的屏幕截图和下面的源代码
import React, { Component, useState } from "react";
import withAuth from ".
浏览 1提问于2020-03-22得票数 0
回答已采纳
我发现，如果：
有两个setStatethe，第一个用从awaitthe获得的值调用，都是在同一个线程中调用的。
然后，有一个框架，其中一种状态是设置的，而另一种状态则不是。
示例：
const [bool1, setBool1] = useState(false)
const [bool2, setBool2] = useState(false)
useEffect(() => {
(async () => {
const _bool1 = await true
setBool1(_bool1)
const _bool2 = true
set
浏览 1提问于2022-03-26得票数 2
回答已采纳
我也看到过其他几个同样错误的问题，但它们似乎不能解决我的问题。
我有一个反应引导模式，我试图从子组件中的一个按钮打开，但我得到以下错误。
这是父组件：
OnboardPage.jsx
import React from 'react'
import { Row } from 'react-bootstrap'
import { PersonalDetails } from './personalDetails'
import { EmailVerification } from './emailVerification'
浏览 2提问于2020-09-12得票数 0
回答已采纳
我试图通过声音操纵我的React中显示的图像。我实现了SR，它工作得很好：
<button onClick={SpeechRecognition.startListening}>Start</button>
在我的状态中有一个loadImages数组，它首先是空的：
const [loadImages, setLoadImages] = React.useState([]);
每当所说的单词是"kitten“时，loadImages数组就会以这种方式得到更新：
if(transcript == "kitten")
{
c
浏览 3提问于2021-06-06得票数 2
回答已采纳
我尝试将Toast从react-bootstrap添加到我的应用程序中，并且我可以使用以下代码来实现该功能。然而，我想知道使用useEffect来设置setShow(items.length > 0);的show是否多余？做一些像const show = items.length > 0;这样的事情会不会更容易，或者对我来说有更好的方法？
example of fetch response
{
"items": [
{ "id": 1, "name": "Apples", "price":
浏览 1提问于2021-10-05得票数 2
我想知道两个箱子，哪一个更适合写作？
案例1
import * as React from 'react';
const TestComponent:React.FC = () => {
const [count, setCount] = React.useState<number>(0)
const increment = () => {
setCount(count + 1)
}
console.log("rendering...")
return <div>
浏览 5提问于2022-02-12得票数 -1
我正在学习React中的状态，下面是创建待办事项列表的练习。我捕获待办事项列表中每个输入“项目”的状态，并将它们添加到“项目”数组中。然后，使用HTML呈现"items“数组中的每个元素。 我不明白为什么不能把每一项都放到一个普通的JavaScript数组中呢？提交表单后，我记录"items“数组。然而，无论我提交多少次表单，"items“数组都只有一个元素。以前的值似乎每次都在消失。 我通过使用数组的React状态解决了这个问题。但是我仍然不明白为什么我不能使用JS数组。任何解释/资源都将不胜感激！ function App() {
const items
浏览 16提问于2021-09-08得票数 0
回答已采纳
我见过其他标题完全相同的问题，但没有解决我的问题:这是我的代码：
import React, { useState } from 'react';
import Validation from './Validation/Validation';
import Char from './Char/Char';
function App() {
const [textState, textSetState] = useState('');
const [charsState, charsSetState] = useSta
浏览 6提问于2019-12-17得票数 0
回答已采纳
1回答
我有React函数组件Input --它是一个简单的input字段，只需要一个名为epoch的prop，以毫秒为单位表示epoch的值。在组件内部，我使用moment js来格式化这次是HH:mm (hour:min)格式，我还使用Input组件中的useState设置input值，同时用户更新我需要用复杂算法检查的输入，并且需要附加+/-和数字。
Input.jsx
import React, {useState, } from 'react'
import moment from 'moment'
function Input({epoch}){
co
浏览 2提问于2020-01-14得票数 1
PostList组件，当我添加createCFommonent时，会得到太多的重呈现错误。React限制呈现的数量，以防止无限循环。
import React,{useState,useEffect} from 'react';
import axios from 'axios'
import './PostList.css'
import CommentCreate from './CommentCreate';
const PostList = () => {
const [ptitle,setPtitle]=
浏览 1提问于2020-10-05得票数 0
这是我的代码。我想在列表的顶部添加一个新的费用项目。我希望得到一些帮助，告诉我如何在列表的顶端创建新的费用。我一直得到相同的错误:太多的重新渲染。React限制渲染的次数，以防止无限循环。我该如何解决这个问题呢？
import React, { useState } from "react";
import { Text, View, ScrollView } from "react-native";
import NewExpense from "../NewExpense";
import {
selectTitle,
selectP
浏览 1提问于2021-09-06得票数 0
我有以下代码(dom 16.8.6，react-dom: 16.8.6)：
import React, { useState, useEffect, } from 'react';
import ReactDOM from 'react-dom';
function App(props) {
const [counter, setCounter] = useState(0);
console.log(1)
useEffect(() => {
console.log(2)
setTimeout(() => {
浏览 1提问于2019-08-12得票数 3
回答已采纳
我正在尝试在useEffect中使用useState。我想要访问和修改其中的一个状态( useEffect )，这里命名为isAuth，并根据新的状态呈现组件。
import React, { useState, useEffect } from 'react';
const Authentication = () => {
const [isAuth, setIsAuth] = useState(false);
useEffect(() => {
console.log(isAuth);
setIsAuth(tr
浏览 17提问于2019-08-16得票数 3
我正在尝试访问包含在useRef中的函数中的function状态。但是，即使使用绑定到App以访问状态的助手函数，状态也不会在useRef函数中更新。
getCount outside 0
// after clicking, getCount inside is still 0, even though count now equals 1
getCount outside 1
getCount inside 0
import React, { useState, useRef } from 'react'
import ReactDOM from 'react-do
浏览 1提问于2022-07-09得票数 0
回答已采纳
假设我有以下代码：(这太冗长了)
function usePolicyFormRequirements(policy) {
const [addresses, setAddresses] = React.useState([]);
const [pools, setPools] = React.useState([]);
const [schedules, setSchedules] = React.useState([]);
const [services, setServices] = React.useState([]);
const [tunnels, setTun
浏览 4提问于2019-12-03得票数 12
回答已采纳
1回答
const数，setNum = useState(0)；当我想要添加和更改它时，我会得到这个错误(setNum(number+1))。我的错误:超过了最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用componentDidUpdate时，就会发生这种情况。React限制嵌套更新的数量，以防止无限循环。我能解决什么问题？
const App = ()=>{
const [text,setText] = useState('');
const [todo,setToDo] = useState([]);
浏览 3提问于2021-12-12得票数 0
回答已采纳
有问题时，当指向comp的标题状态为空时，如果我编辑代码并刷新其显示，如果我将状态添加到useEffect "itemCollectionRef，items“是一个inf循环，但是数据是它们的任何人都有更好的想法或方法从消防局获取数据以供显示。
import React, { useState, useEffect } from "react";
import { Grid, Box, Button, Space } from "@mantine/core";
import { ItemBadge } from "../../components
浏览 2提问于2022-07-14得票数 0
回答已采纳
我试图找出在使用useState钩子更新状态时何时发生重呈现。在下面的代码中，单击按钮将触发包含一个handleClick函数的setTimeout函数。setTimeout内部的回调在1秒后执行，通过调用setCount更新状态变量计数。控制台日志然后打印一条消息。
在单击按钮后，我希望控制台日志显示的顺序是：
'Count in update'，0'Count post update in setTimeout'，0'Count in render'，1
但是，在运行此代码之后，我看到的顺序是：
'Count in update
浏览 6提问于2022-01-28得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
