setState函数(功能组件)不会在控制台中更新状态
setState函数是React中用于更新组件状态的方法。在功能组件中，使用useState钩子函数来创建和管理状态。与类组件中的setState方法不同，useState返回一个包含状态值和更新状态值的数组。
当调用setState函数时，React会重新渲染组件，并将新的状态值应用到组件中。然而，在功能组件中，由于没有实例化的概念，也没有类似于生命周期方法的机制，所以状态更新不会在控制台中显示。
要在功能组件中更新状态，可以通过以下步骤实现：
- 使用useState钩子函数创建状态变量和更新函数。例如，可以使用以下代码创建一个名为count的状态变量和一个名为setCount的更新函数：
const [count, setCount] = useState(0);- 在组件中使用状态变量。可以通过直接使用count变量来访问当前状态的值。
- 在需要更新状态的地方调用更新函数。例如，可以在点击按钮时调用setCount函数来增加count的值：
<button onClick={() => setCount(count + 1)}>Increase Count</button>通过这种方式，可以在功能组件中更新状态，并实现相应的界面更新。然而，这些状态更新不会在控制台中显示。
腾讯云提供了一系列与云计算相关的产品，包括云服务器、云数据库、云存储等。具体推荐的产品和产品介绍链接地址可以根据具体需求和场景来确定。
相关·内容
1回答
我试图从fetch()中获得一个特定的返回值(string类型)，但是我失败了，尽管当我试图在控制台上显示它时，数据就在那里。问题是，我需要在"function“中执行。这意味着它在setState的“类组件”中工作。下面是代码:太简单了
import {useState} from 'react';
function ProfilePhoto(props) {
const [data,setData]=useState(()=>fetch(url)
.then((response)=>response.json())
.then
浏览 1提问于2022-05-26得票数 1
在React组件中，我有以下代码
this.state.author[field] = value;
在控制台中，我收到了一个警告:不要直接更改状态。使用setState()
我怎么能把作者和[]放在setState里呢？
浏览 1提问于2017-08-20得票数 0
回答已采纳
我需要在react本机中显示类似选项卡的行为。
我从创建状态变量selectedSub开始，该变量由“”中的值初始化。
现在我的模式有2 TouchableHighlight，如下所示
_availabiltyModal() {
return (
<TouchableHighlight
onPress={() => { this.setState({ selectedSub: 'from' }) }}
activeOpacity={0.9}
style={[styles.tab, this.state.selectedSub == '
浏览 1提问于2018-11-08得票数 2
回答已采纳
1回答
我正在尝试将一个对象从父类传递到子类。我使用axis发出GET请求，在那里我获取对象，然后在父类中将请求的响应设置为this.state.contact。直到一切看起来都很好，如果我console.log联系人的状态，它会正确显示。 在控制台中输出时，该对象如下所示：{first_name: "Test", last_name: "surname", email: "test@hotmail.com", phone_number: "7228732837", slug: "testhotmailcom"}，如果我
浏览 22提问于2021-07-28得票数 0
回答已采纳
为什么“初始结果”和“最终结果”在控制台中是相同的，尽管html中的state.result是不同的和正确的？我搞错了吗？我希望有一个文本输入，以更新结果时，您键入。另外，当你删除一封带有退格的信件时，它不会更新。
我在控制台中打印了值，但这是因为值是过去的，而不是当前的。
import React from 'react';
export default class TQValueCalculator extends React.Component {
constructor(props) {
super(props);
this.state = ({re
浏览 0提问于2019-01-23得票数 1
回答已采纳
我试图使用setState存储一个值，但是我正在设置状态，而在下一行中，我试图在控制台中看到这个值。
getInitialState: function(){
return{
myCountry: ""
}
}
var country = event.target.value;
this.setState({"myCountry": country});
console.log(this.state.myCountry); //prints nothing
console.log(event.target.valu
浏览 3提问于2016-11-16得票数 0
回答已采纳
这个应用程序应该通过一个特定的输入来过滤单词。在呈现组件时，我想用setState()调用一个函数，从技术上讲，它是工作的，但是控制台中有警告。
警告:无法在现有状态转换期间(例如在render内)进行更新。呈现方法应该是道具和状态的纯函数。
我想这是因为我在render函数中调用了函数，而我不应该这样做，但是我应该做什么呢？
class UsersList extends React.Component {
constructor(props) {
super(props);
this.state = {
allUsers: ["Michał
浏览 1提问于2019-05-01得票数 1
回答已采纳
1回答
在下面的代码中，如何只更新组件B而不更新组件A(或父组件)
构成部分A：
const A = ({ data, clickCallback }) => {
console.debug('A');
return (<button onClick={clickCallback}>Component A</button>)
};
构成部分B：
const B = ({ filteredData }) => {
console.debug('B');
return <h1>Component B: {f
浏览 2提问于2021-01-12得票数 0
回答已采纳
当我在steState中使用MyComponent函数时，它什么也不做，并且在控制台中记录原始状态？
这是我的BaseComponent代码：
export class BaseComponent extends React.Component {
constructor (props) {
super(props);
this.state = {
foo: 'bar'
}
this.setMyState();
}
render() { return (<div></div>); }
}
这是扩展的
浏览 2提问于2018-04-13得票数 0
回答已采纳
4回答
我正在学习React，但是我无法理解为什么我在控制台中得到了这个输出。心地善良的人可以详细解释一下“行刑”哦，这些钩子？
import { useState, useEffect } from "react";
function Homepage() {
const [state, setState] = useState();
useEffect(() => {
console.log("useEffect");
console.log("useEffect not executed");
setState
浏览 24提问于2022-04-20得票数 1
我正在尝试执行本ReactJS教程的第15步：
提交人建议如下：
overflowAlert: function() {
if (this.remainingCharacters() < 0) {
return (
<div className="alert alert-warning">
<strong>Oops! Too Long:</strong>
</div>
);
} else {
return "";
}
},
rend
浏览 11提问于2017-03-12得票数 21
回答已采纳
我试图在不使用任何生命周期方法的情况下直接更新返回中的状态，并得到如下错误：
超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用componentDidUpdate时，就会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
上面的错误我参考了，但是我没有得到一个合适的解决方案。是否总是需要使用函数或生命周期方法来更新状态？
import React, { Component } from "react";
import "./App.css";
class App extends
浏览 1提问于2019-05-20得票数 0
我试着做一个简单的问候短信的反应，但这是行不通的！控制台中没有抱怨错误，实际上它只是忽略了componentDidUpdate中的所有内容，并且只在**this,state**中显示了原始的dayPeriod文本“早上”。守则如下：
class MainContent extends Component {
constructor(props) {
super(props)
dayPeriod: 'morning'
}
}
}
componentDidUpdate(preProps, preState)
浏览 1提问于2020-08-21得票数 0
我正在玩React，并试图将用户键入的文本保存到state的输入中。我在textarea中添加了一个用于设置状态的onChange属性。
但是，当我开始输入时，我会在控制台中看到错误，说明是TypeError: _this.setState is not a function。
我试过不同的方法来修复它，但仍然没有。
const NewItemForm = props => (
<Form onSubmit={props.send_form}>
<Form.Group>
<TextArea
浏览 0提问于2018-03-19得票数 5
回答已采纳
1回答
当用户未登录时，我只想显示一次登录屏幕。然后，每次启动应用程序时，如果用户被登录，则从搜索屏幕开始，但它一直从登录屏幕启动。我怎么才能解决这个问题？导航逻辑包含在index.android.js文件中：
import React, { Component } from 'react';
import TextField from 'react-native-md-textinput';
import {
AppRegistry,
Navigator,
BackAndroid,
StyleSheet,
Text,
TouchableHigh
浏览 1提问于2016-07-08得票数 1
回答已采纳
我是新的反应，我面临一个问题，当更新setState()，并在控制台显示错误作为附加的图像。 <input
type="text"
name="firstName"
id="firstName"
placeholder="First Name"
onChange={e => {
this.handleInput(e);
浏览 14提问于2020-01-04得票数 0
回答已采纳
我有一个反应本地应用程序，我试图更新一个日期在一个自定义的上下文。
ThemeContext
export const ThemeContext = React.createContext({
theme: 'dark',
toggleTheme: () => { },
date: new Date(),
setDate: (date: Date) => { }
});
具有日期和更新日期的函数的基本上下文
App.tsx
export default class App extends React.Component {
浏览 1提问于2021-02-08得票数 0
回答已采纳
我创建了一个简单的待办事项列表来学习反应，并试图添加一些额外的功能。目前，我正在尝试添加按钮，以切换项目列表，因此它要么显示所有任务，要么只显示已完成的任务。
我编写了一个函数来更改我的visabilityFilter状态，这样以后我就可以使用它来切换列表中的项，但这并不是应该做的事情。
我在控制台上记录了visabilityFilter变量，但是在更改到正确的状态之前，它总是显示错误的状态。例如，“显示全部”按钮将控制台日志‘显示完成’，然后如果您再次按它，它将控制台日志‘显示全部’
App.js
import React, { Component } from 'react'
浏览 0提问于2019-02-15得票数 8
回答已采纳
我创建了一个带有React的登录系统，它在用户登录时存储一个会话。在重新加载页面时，我添加了一个函数，该函数应该检查会话是否存在，然后检查是否存在setState()到true或false。
因为我刚开始反应，所以我不知道如何执行这个函数。请参阅下面App.js的代码
import React from 'react';
import './css/App.css';
import LoginForm from "./LoginForm";
import Dashboard from "./Dashboard";
class A
浏览 0提问于2018-08-08得票数 5
回答已采纳
2回答
我正在使用map和Table，但是我无法让它工作，因为这是我的第一个ReactJS应用程序。
以下是我正在做的事情：
<table className="table table-striped">
<tbody>
{this.state.itemList.map(this.addMemberRow)}
</tbody>
</table>
这是我的addMemberRow功能，我不确定它是否正确！
addMemberRow
浏览 0提问于2016-05-31得票数 0
回答已采纳
2回答
const Greeting = () => {
console.log("Greeting is called");
return <h2> Hello World </h2>;
}
class Counter extends React.Component{
constructor(props){
console.log("Counter is called");
super(props);
this.state = {
coun
浏览 1提问于2018-08-23得票数 1
回答已采纳
就像我的问题一样，如果我有不同的setState()调用，它们的顺序在执行时是否会得到尊重？我知道setState()是异步的，那么如果setState()数字1很重(从繁重的代码计算中得到更新)，它会在轻setState()数字之前或之后执行并给出结果吗？我的意思是setState() 2会等到setstate() 1完成吗？
setState({imgfile:imgf});//[1]
setState({title:tit});//[2]
浏览 0提问于2020-03-29得票数 3
4回答
在线演示：
react与semantic-ui的结合
解释
我制作了一个名为Alert contains semantic-ui modal的组件，我在页面中点击一个按钮就调用了这个模式，这个模型包含一个input，它有两个handler看起来都可以工作，因为我用console.log调试，它在后台工作，但不显示更改，最好是在关闭modal之后再打开的state。
代码视图：
当我单击按钮时，通过这个处理程序调用模式：
this.state = {
...
amount: 50000
}
Increase = (e) => {
let Html = (<div>
浏览 2提问于2020-01-09得票数 1
回答已采纳
我试图在if条件中加入一个setState函数，但是值没有更新。 请在下面找到代码片段 archivePath = (filepath: string) => {
if (filepath) {
const breadcrumbs: any[] = [];
var selectedgroup: string | undefined = "";
let relPath: string = this.props.selectedGroup + "";
浏览 94提问于2021-09-15得票数 0
我正在尝试使用React与REST进行交互，并且我已经意识到，当我获取数据时，render只会被调用一次而不带数据，然后再次调用和(数据)。
当我试图处理这些数据时，这会引发异常，但我可以使用if语句来检查数据是否为空。然而，我不确定是否需要这样做。
class App extends Component {
state = {
TodoList: {},
};
componentWillMount() {
axios.get("http://localhost:5001/1").then((response) => {
this
浏览 0提问于2019-01-27得票数 5
回答已采纳
我想从一个函数中访问另一个函数中的值。这两个函数位于相同的作用域，而不是嵌套的。 我尝试只使用一个函数ComponentDidMount()，并扩大了外部查询的作用域，以便可以在内部访问该值。它可以工作，但在控制台中不断给出错误，但显示是正确的。我想这是因为我对多个东西使用了相同的引用。但是如果我缩小了作用域，同时仍然保持一个函数，它就不能工作。我认为这和创建两个函数并且不能访问另一个函数中的值是一样的。但是我不明白，虽然我setState了第一个函数里面的值。为什么我在构造函数中初始化的第二个函数会返回到默认值？ 这就是我现在拥有的。请注意，ComponentWillMount可以是任何其
浏览 9提问于2019-04-23得票数 0
回答已采纳
2回答
我开始反应JS，然后跟着这个小练习，。
这很简单，但在设置状态值时，我面临着巨大的差异。当我设置状态时，我在控制台中通过以下操作查看它：console.log("s: "+this.state.userInput);。我还用{this.state.userInput}在视图中显示了它。相当简单。但不是真的。事件和状态值似乎始终是控制台中的一个字母，但它在视图中显示得很完美。这怎么可能？！
每当状态发生变化时，我都想查询我的服务器，但是状态总是落后的。太奇怪了。有人能给我解释一下这是什么吗？我怎么才能避免呢？
这是密码。
var SearchContainer = React.c
浏览 7提问于2015-09-15得票数 1
回答已采纳
1回答
我试图模仿一个简单的排序算法，并使用React setState实时存储排序数组(作为“输出”)，间隔为100 as，这样它就可以在屏幕上显示为算法可视化器。排序后的数组可以显示在控制台中，但未相应地进行实时更新。我怎么才能解决这个问题？
const [output, setOutput] = useState([]);
const timer = (ms) => new Promise((res) => setTimeout(res, ms));
const Simple_Sorting_Algo = (n) => {
const array = [
浏览 2提问于2022-02-09得票数 1
为什么响应钩子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
回答已采纳
1回答
我是反应发展方面的新手，
我在构造函数中创建了一个状态变量。
constructor (props) {
super (props);
this.state = {
status: false,
};
}
我正在使用redux，并且我有一个操作方法来更新redux值。
export const actionMethod = () => {
return dispatch => {
return fetch (
)
.then (response => response.json
浏览 1提问于2018-04-11得票数 1
回答已采纳
只是试了几个反应钩，问了几个问题。
考虑这个带有react钩子的功能组件：
const Counter = (props) => {
console.log("Counter component");
const [count, setCount] = useState(0);
const handleIncrease = () => {
setCount(count + 1);
}
const handleDecrease = () => {
setCount(count - 1);
}
return (
浏览 0提问于2019-04-04得票数 1
回答已采纳
2回答
我在代码中使用了2 useState。当第二次useSate状态为真时，我希望第一次useState状态为假。
我可以使用类组件来实现它，而不是通过功能组件。
类组件代码
class App extends React.Component {
state = { visible: false, childrenDrawer: false };
showDrawer = () => {
this.setState({
visible: true,
});
};
onClose = () => {
this.setState({
visible: false,
});
浏览 2提问于2020-10-09得票数 0
我是个新手，我正在尝试使用一个函数来修复日期的输入。基本上，如果日期丢失，我会将其默认为'9999-12-31‘，以便PHP后端更容易将其插入数据库中。保存表单时，它调用validateInputs函数，该函数更正丢失的日期，然后调用onSave函数。如果我这样做：
validateInputs: function(e) {
if (!this.state.expire_date || this.state.expire_date == '') {
this.setState({ expire_date: '999
浏览 0提问于2020-02-12得票数 0
这是我的类组件：
import React from 'react';
import { Jumbotron, Container, Label } from 'reactstrap';
import './Css.css';
class Settings extends React.Component {
state = {
isChecked: false,
}
isCheck(e) {
this.setState({
isChecked: e.target.checked
})
浏览 2提问于2020-08-20得票数 1
回答已采纳
在使用setState更新状态之后，如果我记录状态，即使状态不为空，我也会得到空数组。
我有钩子，如下面的代码所示。
const [pets, setPets] = useState([]);
async function requestPets() {
const { animals: animalsProperty } = await pet.animals({
location,
breed,
type: animal
});
console.log(ani
浏览 0提问于2019-07-15得票数 0
类组件
在React类组件中，我们被告知setState 总是会导致重呈现，而不管状态是否实际更改为新值。实际上，组件将在状态更新到之前相同的值时重新呈现。
除非setState()返回false，否则shouldComponentUpdate()总是会导致重呈现。
钩子(功能组件)
但是，使用钩子，文档指定将状态更新为与前一个状态相同的值，not将导致(子组件的)重呈现：
退出状态更新
如果您将状态挂钩更新为与当前状态相同的值，则React将在不呈现子状态或触发效果的情况下退出。(React使用Object.is比较算法。)
密切相关的问题
类组件中的this.s
浏览 0提问于2019-03-27得票数 35
回答已采纳
对于使用componentDidMount和setState更新自定义组件来说，我还很新鲜，这似乎是推荐的方法。下面是一个示例(包括一个获取数据的axios API调用)：
import React from 'react';
import {MyComponent} from 'my_component';
import axios from 'axios';
export default class Example extends React.Component {
constructor(props) {
sup
浏览 0提问于2016-11-18得票数 14
回答已采纳
我好像官方医生说：
setState()的第二个参数是一个可选的回调函数，该函数将在setState完成并重新呈现组件后执行。通常，我们建议对这种逻辑使用componentDidUpdate()。
当我们需要使用最新的状态时，他们为什么建议使用componentDidUpdate而不是回调？
浏览 3提问于2017-08-09得票数 6
你知道为什么我的状态会变成未知的吗？
整个情况是，我发起我的状态是：
const [state, setState] = useState({
email: '',
password: '',
loading: false,
errors: {}
下面是更新电子邮件和密码字段的内容：
const handleChange = (event) => {
console.log("Target:",event.target)
console.log("Name:",event.target.name, "Value:&#
浏览 6提问于2020-12-08得票数 3
回答已采纳
这里有新的反应。我有一个返回表单(表示组件)的纯函数。在这种形式中，我需要处理那些被控制的文本字段的onChange事件。FWIU，我需要this.setState(.)在我的onChange事件处理器中。但是，由于这是一个纯函数，所以我无法访问this.setState()。是否有一种很好的方法可以在onChange函数中设置这些ES2015事件的状态？如果这有帮助的话，我也在使用redux。示例代码：
import React, {PropTypes} from 'react'
const ApplicationForm = ({submitHandler, person
浏览 7提问于2016-08-16得票数 5
回答已采纳
import React from 'react';
export default class CreateNote extend React.component {
constructor(props) {
super(props);
this.state = {note:{title:" ",content:" "} };
console.log(this.state);
}
const inputEvent = (event) => {
浏览 0提问于2021-07-18得票数 0
constructor(props) {
super(props);
this.state= {
input: "",
}
}
_textChange = (text) => {
this.setState({
textValue: text,
// textEntered: true
})
console.log(this.state.textValue);
}
和：
<Te
浏览 2提问于2021-01-09得票数 0
我有一个简单的hello-world示例来尝试useState钩子；但是，当我在控制台中输出测试信息时，我发现每当我启用useState时，控制台日志就会记录到信息的两倍。
参见 in CodeSandbox (控制台中显示了调试信息)。
浏览 7提问于2020-04-09得票数 4
回答已采纳
1回答
我正在尝试创建一个函数，该函数可以使其子节点的位置处于呈现状态，这样它就可以在没有重叠的情况下重新呈现它们(它们绝对定位)。
const ContentWrapper: React.FC<{article: Article.article.article}> = ({ article }) => {
const [footnotePositions, setFootnotePositions] = useState<Number[]>([]);
const updatePositions = (footnotePosition) => {
浏览 0提问于2020-10-14得票数 1
回答已采纳
2回答
我有一个问题，我不能修复useState的反应。我试图对电影和分页提出API请求，但我的状态之一是undefined，我真的不明白为什么。我的组件是功能组件。
这是我的useState：
const [state, setState] = useState({
films: [],
page: 1,
genres: [],
currentCategory: ""
})
下面是我的API请求：
const getFilms = () => {
Axios.get(`${baseUrlDiscover}&page=${sta
浏览 5提问于2020-06-19得票数 1
回答已采纳
我在React组件中有一个属性name。我正在尝试使用setState来修改这个属性。但是，在setState中为该属性赋一个新值没有任何效果。请在下面找到我的示例代码。
export const Test = ({
name,
changeState = function (newName) {
this.setState({name: newName}, () => console.log('Name after setState # ' + name)); //prints old value
console.log(name); // Do
浏览 0提问于2018-03-12得票数 0
3回答
我有一个问题，我不能解决，在反应:我想改变背景图像每3秒。代码可以做到这一点，但它只涉及一个问题:当我更新"teaserAnimCount“状态时，我可以在我的控制台中看到这个值呈指数增长。我不知道为什么，随着时间的推移，这是一个问题，因为网络兄弟崩溃。
在开始时，"console.log("this.state.teaserAnimCount")的值是1(它很好)，然后是3，7，然后是15，如果你知道为什么？
这是在renderTeaserBackground箭头函数中。
我的代码：
import React, { Component } from '
浏览 0提问于2018-03-09得票数 1
回答已采纳
我正在使用资料-ui库并制作数据。对于datatable，我使用的是这个库。我需要调用一个API来检索数据并显示在表中。我在控制台中签入了数据，但没有显示在datatable中。
下面是我的代码：
state = {
students: [],
rows: []
};
componentDidMount() {
document.title = "List of students";
axios
.get("api.url")
.then(res => {
this
浏览 3提问于2019-11-02得票数 1
回答已采纳
在使用时，与功能组件相比，您有一个优势，即在父级更新时组件并不总是呈现出来。实际上，它只在组件道具发生更改时呈现，在本例中，只有当您更改输入时才会呈现。
如何将一个对象传递给PureComponent而不破坏使用这种组件的所有优点？
这是否意味着，一旦您有了预期对象类型的道具，最好只是使组件具有功能？
我增加了一个例子来说明我的意思..。(可能你需要在一个新窗口打开它，因为有很多不同的孩子)
class TestPureComponent extends React.PureComponent {
render() {
return <div style={{border
浏览 0提问于2019-08-29得票数 3
回答已采纳
2回答
在这里，我从子组件中获取数据，并试图将其添加到现有数组中，还试图使用map在控制台中显示数据，但当我试图这样做时，控制台中什么也没有：
import "./App.css";
import Home from "./Components/Home";
import {useState} from 'react';
let App = () => {
let DataList = ["Apple","Banana"];
const newList = (data)=>{
DataL
浏览 3提问于2022-08-14得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
