react不调用useState
React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，使得开发者可以将界面拆分成独立的、可复用的组件，从而提高代码的可维护性和可重用性。
在React中，useState是React提供的一个钩子函数，用于在函数组件中添加状态。通过调用useState，我们可以在函数组件中声明一个状态变量，并且可以通过修改该变量来更新组件的状态。useState函数接受一个初始值作为参数，并返回一个包含当前状态值和更新状态值的数组。
使用useState的优势在于它简化了状态管理的过程，使得开发者可以更方便地在函数组件中使用和管理状态。它避免了类组件中繁琐的this绑定和手动管理状态的过程，使得代码更加简洁和易读。
应用场景：
- 表单输入：可以使用useState来管理表单输入的状态，实时获取用户输入的数值或文本。
- 组件间通信：可以使用useState来在组件之间传递和共享状态，实现组件间的数据交互。
- 动态渲染：可以使用useState来控制组件的显示和隐藏，实现动态渲染的效果。
- 状态切换：可以使用useState来实现状态的切换，例如实现一个开关按钮的功能。
腾讯云相关产品推荐： 腾讯云提供了一系列与云计算相关的产品和服务，以下是一些与React开发相关的产品推荐：
- 云服务器（CVM）：腾讯云提供的弹性云服务器，可满足不同规模和需求的应用场景。链接：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版（CDB）：腾讯云提供的高性能、可扩展的云数据库服务，适用于存储和管理应用程序的数据。链接：https://cloud.tencent.com/product/cdb_mysql
- 云函数（SCF）：腾讯云提供的事件驱动的无服务器计算服务，可用于编写和运行无需管理服务器的代码。链接：https://cloud.tencent.com/product/scf
- 对象存储（COS）：腾讯云提供的高可靠、低成本的对象存储服务，适用于存储和管理大规模的非结构化数据。链接：https://cloud.tencent.com/product/cos
请注意，以上推荐的产品仅作为参考，具体选择应根据实际需求进行评估和决策。
相关·内容
是否有允许在函数组件之外分配useState的语法？到目前为止，我已经尝试过了，但是它没有起作用：
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function App() {
useEffect(() => setStateData("from useEffect"), []);
return <div className="App">{stateData}</div
浏览 5提问于2019-12-16得票数 6
回答已采纳
我试图从我的signIn方法中捕获一个错误，然后在我的代码中显示一个警报。我收到警告说“未处理的拒绝承诺.”
export default function Login({navigation}){
const [email, setEmail] = React.useState('');
const [password, setPassword] = React.useState('');
const [showAlert, setShowAlert] = React.useState(false);
co
浏览 3提问于2020-10-10得票数 2
回答已采纳
我正在写一个简单的程序，在反应类型记录，允许用户提交和渲染文本的浏览器。
提交后，生成一个新对象，将该对象保存为document状态，然后将其扩展到一个名为choreList的新状态，如下所示：
const handleSubmit = (e: React.FormEvent<HTMLFormElement>)=> {
e.preventDefault()
let doc = new ChoreDoc(name,chore,date)
setDocument(doc)
setChoreList([...choreList,document]
浏览 5提问于2020-12-24得票数 0
回答已采纳
我对React钩子中的useState感到非常困惑。 我不知道为什么当我使用useState时，setTimeout函数中的console.log会多次调用。 如果我删除useState，它通常只调用一次。如果我使用类状态而不是钩子，它通常也只调用一次。 为什么会发生这种情况呢？我该怎么处理呢？ (以下是我的代码) import React, { useState, useEffect } from "react";
import "./App.css";
const usePassword = () => {
const [passwordVal
浏览 137提问于2021-11-09得票数 0
4回答
所有人！
有人能告诉我if / Can语句中的更新状态是否可以由React规则接受吗？特别是基于条件内承诺的结果来更新状态。
例如：
import {useState} from "react";
import {somePromiseOne, somePromiseTwo} from "./example";
function example(){
const [state, setState] = useState();
if(true){
somePromiseTwo().then((result) => setState(re
浏览 12提问于2022-06-22得票数 1
我有一个，这里我使用mobx ("mobx- React "："^6.1.8")并使用。
我得到了错误:无效的钩子调用。只能在函数组件的主体内调用钩子。
商店index.js
import { useContext } from "react";
import UserStore from "./UserStore";
import SettingsStore from "./SettingsStore";
const useStore = () => {
return {
UserStore
浏览 5提问于2020-03-10得票数 1
为什么我的页面会呈现两次，然后在从api中获取数据之后，它会再次呈现两次。这是我的密码
import React, {useState, useEffect} from "react"
import axios from "axios"
function Pokemon()
{
const [pokeList,setPokeList] = useState([]);
useEffect(()=>{
console.log('useState-mounted')
a
浏览 4提问于2020-05-15得票数 0
回答已采纳
试图在屏幕大小变化时获得确切的窗口值。如何将窗口值输入useState()？因为useState不能在条件中使用，而且窗口在useEffect之外是未定义的？
const isSSR = typeof window !== "undefined";
const [windowSize, setWindowSize] = React.useState({
width: isSSR ? 1200 : window.innerWidth,
height: isSSR ? 800 : window.innerHeight,
});
浏览 1提问于2022-02-09得票数 1
回答已采纳
我有反应元件
import React, {useState} from 'react';
function App() {
const [number, setNumber] = useState(12);
return (
<>
<h1>Number value is: {number}</h1>
<div className="btn btn-success" onClick = {() => setNumber(number + 1)}>Add</div&
浏览 5提问于2021-03-12得票数 0
回答已采纳
2回答
在“反应”中，我尝试制作一个功能，让用户在点击时可以通过更改其图标来查看屏幕上的主动反馈。
我怎么能让它改变到另一个图标(例如，从方框到BoxChecked)，一旦我点击它？
注意:我知道这个代码行是问题所在.(呜咽)
<img src={click} alt="icon" onClick={handleClick} />
App.jsx
import React, { useState } from 'react'
import './App.css'
import { GrCheckbox as Box } from '
浏览 8提问于2022-06-07得票数 1
回答已采纳
在使用reactjs useState()钩子之后使用console.log()，没有返回这个状态的当前值，我该如何处理这个问题？ 下面是本例的代码，试着找出控制台日志显示的内容。 import React, { useState } from "react";
import ReactDOM from "react-dom";
function Weather() {
const [weather, setWeather] = useState();
return (
<input
value={weather}
浏览 28提问于2019-02-25得票数 19
回答已采纳
2回答
我开始学习如何反应，我在执行一个请求时遇到了困难，或者更确切地说，是两个请求而不是一个请求。我做错了什么？
import React, { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import { useDocumentTitle } from "../use/useDocumentTitle";
import axios from "axios";
function NewsPage() {
浏览 7提问于2022-08-22得票数 0
回答已采纳
我有一个使用中的计时器组件，它可以为每个用户提供大量的数据，所以在提供日期范围之前获取数据是没有意义的。对于RTK查询，使用钩子进行api调用(e.x )。{数据: timecards，isLoading，isSuccess} = useGetTimecardsQuery(userId) )。使用资料ui日期范围选择器(或任何日期范围选择器)，这些值最初为null或"“，直到用户选择日期，然后该日期设置值。为了延迟提取，一种常见的方法是将提取放到函数或钩子中，等待日期被选中并按下按钮。但是，由于RTK查询使用钩子，因此它打破了钩子规则，将其放置在组件函数的顶层主体上。我尝试将搜索调用作
浏览 3提问于2022-06-03得票数 0
回答已采纳
当用户点击按钮时，我想显示系统的当前时间，但是我得到了这个错误。TypeError方法Date.prototype.toLocaleTimeString调用未定义的不兼容接收器
import React, { useState } from "react";
const App = () => {
let curr = new Date().toLocaleTimeString;
const [current, setTime] = useState(curr);
const getTime = () => {
let newcurr = n
浏览 10提问于2022-01-02得票数 0
我有下面的父组件。在这里，我希望在加载子组件内部设置setLoading函数。
const ReportRechargeDetail = React.memo(() => {
const [selectedDates, setSelectedDates] = useState([]);
const [loading, setLoading] = useState(false);
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Row className="heade
浏览 3提问于2021-04-03得票数 0
回答已采纳
2回答
将一个React作为另一个组件的支柱传递给它是可以接受的/常见的吗？
还是意味着它们只属于在其中声明的组件？
下面只是一个例子，用来说明我把它传递给
从父组件到子父组件的支持。
import React, { useState } from 'react';
export const Parent = () => {
const [count, setCount] = useState(0);
return <div>
Current count is {count}
<Child setCount={setCount} /
浏览 5提问于2021-03-25得票数 17
回答已采纳
3回答
我正在尝试根据道具的数据来设置初始状态。
const Calculate({data}) => {
const [number, setNumber] = data === 'end' ? useState(5) : useState(0);
return (...)
}
这给了我一个错误: React "React.useState“是有条件的。在每个组件呈现中，必须以完全相同的顺序调用React。
所以我决定用useEffect更新我的代码：
const Calculate({data}) => {
const [number, setNu
浏览 12提问于2021-08-26得票数 3
回答已采纳
当useState更新时，map循环不能在useState对象内部的数组中工作。反应js
import { useState } from "react";
import React from "react";
function Check() {
const [Children, setChildren] = useState({data:[], otherdata:{}});
function handleChange(){
Children["data"] = [...Children["data"],
浏览 2提问于2021-07-11得票数 0
回答已采纳
在我的心理模型中，React函数组件基本上是剥离到render方法的类组件( React文档强调render应该是状态和属性的纯函数)。我假设render方法和功能组件是在React生命周期的同一阶段调用的，那么为什么不能在render方法中使用钩子呢？更准确地说，我想知道不允许使用钩子的类组件的技术限制。
import React from "react";
export default class App extends React.Component {
render() {
const [state, setState] = React.useState(
浏览 2提问于2020-08-17得票数 0
我正在构建一个应用程序，重点是显示用户的github存储库和信息。在“区段”组件中，我获取这些存储库并在屏幕上显示它们。在另一个组件“菜单”中，我希望它对这些存储库进行计数并显示它们。在这种情况下我应该使用道具吗？
截面组件
import React, { useState } from 'react'
import axios from 'axios'
import { Square, Wrapper, Input, Button } from './Section.styled'
export default function Sectio
浏览 3提问于2021-06-26得票数 0
附加我使用create-react-app构建的代码。开发一个用于搜索输入的小组件。如果匹配则突出显示word，如果不匹配则继续显示其他文本。 当前解决方案在调用后在所有文本上显示标记。 import React, { useState } from "react";
const app = (props) => {
const [value, setValue] = useState("");
const [searchValue, setSearchValue] = useState("");
const [checke
浏览 16提问于2020-01-29得票数 0
回答已采纳
在每个组件呈现中，必须以完全相同的顺序调用React。在Eslint的react-hooks/rules-of-hooks中甚至提到了这种行为，但是在这种情况下在某些钩子呈现之前返回null可以吗？
Page接收一个名为keyword的支柱，它应该根据这个关键字搜索帖子。但是如果没有定义关键字，我们就不会呈现页面，因为没有什么可以呈现给用户的。
在这种情况下，在任何钩子之前进行条件呈现可以吗？
function Search({ keyword }) {
if(typeof keyword == "undefined") return null;
const [sea
浏览 2提问于2022-07-11得票数 2
回答已采纳
我必须在一个项目中做一些改变，我不太熟悉反应。如何从外部函数更改钩子的状态？这就是我所拥有的：
export const HomeView = () => {
[...]
const ProductDetails = () => {
const [number, setNumber] = React.useState(0);
const [currentPrice, setCurrentPrice] = React.useState(5);
React.useEffect(() => {
const fetchData = async () =>
浏览 3提问于2021-10-16得票数 0
回答已采纳
1回答
无法键入输入字段
、、、、
我正在创建一个简单的待办事项清单。在这里有一个更新表单的模式，我可以从状态获取相关的值，并将它们设置为输入字段值。那么我就无法编辑输入字段。我认为问题在于onChange函数或值属性。
import React from 'react'
import {useRef,useState,useEffect} from 'react'
import {FaTimes} from 'react-icons/fa'
export const Modal = ({edData,showModal,setShowModal,onAdd,setEd,task
浏览 3提问于2021-06-04得票数 1
回答已采纳
在使用history.push()来路由页面时，我试图将一些获取的数据传递给另一个组件，但据我所知，由于一些异步/同步问题，它无法传递。如何解决这个问题？ 这是数据获取(使用Axios)和数据传递组件 import React, {useState} from 'react'
import {analyse} from '../../services/dataFetching';
function testFunction() {
const [data, setData] = useState([]);
const fetch = ()
浏览 78提问于2021-03-31得票数 1
我似乎无法在javascript中将此API调用的值返回给我的react组件。我有一个调用API的java脚本文件。在js文件中，返回结果，但是当我在react组件中调用useEffect中的js函数时，它返回未定义。 export function ordersData() {
const partner_code = localStorage.getItem('partner_code')
let items = []
let data = []
let isLoaded = false
let error = '
浏览 28提问于2021-10-28得票数 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
在使用FlatList钩子获取数据时，我会在useEffect中得到警告。
这是再现问题的完整组成部分：
import React, { useState, useEffect } from "react";
import {
Text,
View,
FlatList,
ActivityIndicator,
SafeAreaView,
Button
} from "react-native";
const Test = props => {
const [people, setPeople] = useState([]);
浏览 1提问于2020-01-11得票数 1
1回答
我想在一个useState钩子中传递一个布尔值，该钩子在两个函数之间单击时打开和关闭一个模态。但是，我一直收到这个错误消息：Cannot destructure property 'setOpenModal' of 'props' as it is undefined.
Main.js
import React, { useState, useEffect } from "react";
import * as Materials from "../components/Materials"; // <- Mater
浏览 28提问于2021-06-05得票数 0
回答已采纳
我正在调查为什么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
嗨，我模仿了一个项目，没有问题，但不能显示ui，我不确定是什么样的问题，它的is.The对象项目链接：https://codesandbox.io/s/learning-react-color-organizer-2-iytxb?file=/src/StarRating.js 我的项目链接：https://codesandbox.io/s/nervous-flower-xv669?file=/src/App.js我的项目有两个警告，第一个警告是指向app.js的Each child in a list should have a unique "key" prop.： imp
浏览 28提问于2021-01-13得票数 0
回答已采纳
我正在学习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
回答已采纳
2回答
在用户按“确定”或“持续时间”后，我试图关闭快餐店。我尝试将一个额外的变量传递给组件并更改状态，但是它不起作用。下面是我为LogIn页面编写的代码，该页面使用snackbar组件，该组件仅在错误的登录请求之后呈现，而不是全部代码：
const [error, setError] = React.useState(false);
const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');
const [
浏览 11提问于2022-02-23得票数 1
回答已采纳
我正在尝试基于这篇文章创建一个组件： https://scotch.io/tutorials/5-ways-to-convert-react-class-components-to-functional-components-w-react-hooks#toc-class-with-state-and-componentdidmount 但是简单地从上面的链接复制粘贴功能组件会抛出一个错误： TypeError: Object(...) is not a function
Home
src/components/Home.js:3
1 | import React, { useState
浏览 76提问于2019-01-13得票数 2
回答已采纳
我正在构建这个项目，试图提高我对react的理解:)，所以我是一个n00b，因此仍然在学习提取组件、状态、道具等的诀窍。
我有一个子组件DescriptionDiv，其父组件是PlusContent，最后父组件是PlusContentHolder。用户将一些输入输入到DescriptionDiv中，然后使用支持/回调将用户输入传递给PlusContent。
我的问题/问题是：在在PlusContent组件中设置useState()之后，在PlusContentHolder组件中单击按钮之后，返回在console.log中的undefined。
为什么我不能在下一个父组件useState()中读
浏览 12提问于2022-05-05得票数 0
1回答
是否有可能强制执行使用反应钩的特定顺序？例如，一些衬里/漂亮的设置总是确保首先使用'useState‘挂钩，然后才使用'useEffect’钩子。假设我有以下代码：
const MyComponent = () => {
const [myState1, setMyState1] = React.useState();
const [myState2, setMyState2] = React.useState();
React.useEffect(() => {
runSomeEffect()
}, [])
浏览 2提问于2021-01-18得票数 2
回答已采纳
如何从devextreme-reactive react网格中的列选择器中删除列？请注意，我不想在列选择器中禁用该列。
我使用了以下网格：
这里有columnChooserItem的文档，但我不知道如何使用它。
你可以在这里尝试一下代码：
import React, { useState } from 'react';
import Paper from '@material-ui/core/Paper';
import {
Grid,
Table,
TableHeaderRow,
ColumnChooser,
TableColumnVisi
浏览 6提问于2020-03-10得票数 1
2回答
对于将这个函数组件转换为带有构造函数()的类组件，我是新手。我不知道如何转换发生在onSubmit和onClick上的函数。
非常感谢。
函数组件：
import React, { useState, Component } from 'react';
import { render } from 'react-dom';
import './Options.css';
const Test = (props) => {
const [links, setLinks] = useState([]);
const [link, se
浏览 3提问于2022-08-17得票数 0
回答已采纳
1回答
我有一个GetData组件，在该组件中进行API调用。然后，我将数据作为支持传递给将使用数据的图形组件。在这个应用程序中，我返回GetData组件来呈现图形。问题是，这两个图现在被合并成一个组件。我想把它们分开，这样我就可以把两个组件都给它们自己的盒子，然后在每个组件旁边放一个按钮盒。
是否有一种方法可以分别处理这些组件，给出图、单独的容器和将按钮组件放在它们旁边？
这是我的密码：
GetData：
import React, { useState, useEffect, Fragment } from "react";
import axios from "axios
浏览 10提问于2022-03-29得票数 0
回答已采纳
1回答
我尝试在我的模块中实现我的自定义钩子。但这表明我违反了一些钩子规则
import React, { useState, useEffect } from 'react';
import useFetch from '../../Helpers/Custom useFetch()';
import MedicineList from './MedicineUI';
const MedicineContainer = () => {
const [medicineLists, setMedicineList] = useState([]
浏览 5提问于2020-05-19得票数 1
1回答
我试图使用Reatjs、nodejs和JWT创建一个受保护的路由。问题是，在API检查客户端令牌之前，我的组件呈现。这是我正在尝试的代码：
import React, {useState, useEffect} from 'react';
import { Route, Redirect } from 'react-router-dom';
import AuthAPI from './../utils/AuthAPI';
const ProtectedRoute = ({children, ...rest}) => {
co
浏览 0提问于2021-04-25得票数 1
假设我有以下代码：(这太冗长了)
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回答
由于某种原因，在函数"currentUser“中，我的”“状态总是返回null。我要做的是在用户登录时在用户文档上设置一个快照。
我也不确定是否可以在这样的状态下保存取消订阅函数，但这是我还没有机会做到的问题
我的上下文组件如下所示：
import React, { useContext, useState, useEffect } from 'react'
import { auth, db } from '../init/firebase'
const AuthContext = React.createContext()
export func
浏览 2提问于2021-10-14得票数 0
回答已采纳
我花了两天的时间试图弄明白哪里出了错，有什么想法吗？
App.js
import React, { useState, useEffect} from 'react';
import Menu from './components/Menu';
function App() {
return (
<Menu></Menu>
);
}
export default App;
Menu.js
import React, { useState, useContext } from 'r
浏览 1提问于2019-09-17得票数 5
我真的很困惑，因为我正在学习使用钩子，我正在处理useState钩子，当我无意中发现这一点时，当我输入输入时，onClick函数就会被触发。
这是代码：
import React, {useState} from 'react'
function Hooks() {
const [count, setInput] = useState("");
return (
<React.Fragment>
<input value={count} onChange={(e) => {setInput(e.target.
浏览 3提问于2020-07-20得票数 0
回答已采纳
2回答
为什么fetchData函数是在useEffect中而不是在外部定义的？
链接：
import { useState, useEffect } from 'react'
export default function useFetch(url, options) {
const [data, setData] = useState(null)
const [error, setError] = useState(null)
useEffect(() => {
const fetchData = async () => {
try
浏览 4提问于2020-04-30得票数 11
回答已采纳
1回答
在这个屏幕上，我在我的react本机应用程序中获得了Rendered more hooks than during the previous render错误：
const HomeScreen = props => {
const [refreshing, setRefreshing] = useState(false);
if (props.data.loading) { // error shows its located here
return <Text>Loading...</Text>;
}
const onRefres
浏览 3提问于2020-03-07得票数 2
回答已采纳
1回答
我是React Native的新手，我有一个切换的问题，我想保存更改，黑暗模式和切换，当我关闭应用程序并回来时，我的更改应该被保存。当我关闭应用程序时，我的开关回到了第一个位置，暗模式不起作用。我知道我做错了什么，但我没有移动应用程序，这是我的第一次，我不知道如何使用这个应用程序中的AsyncStorage来工作。有人能帮我解决这个问题吗？ import React, { createContext, useState, useEffect } from 'react';
import { AsyncStorage } from 'react-native';
浏览 10提问于2020-01-23得票数 0
以下是代码：
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
回答已采纳
我正在尝试调整一个从基于类的有状态组件到基于函数的组件的udemy课程中的一个例子，这个例子使用的是Reacti16.7.0-α.2的useState钩子。
虽然基本数据类型的setter函数可以很好地工作(例如，setUsername)，但是为数组变量调用setter没有效果/结果。至少它不会将状态变量重置为空数组。
另一方面，通过使用concat方法从状态中设置数组的新副本，效果与预期相同。
我还是新来的反应钩子，想知道我错过了什么？
import React, {useState} from 'react';
import { Grid, Form, Segment, B
浏览 0提问于2019-01-12得票数 7
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
