React (钩子)-设置不应该在没有useState的情况下更改的变量是不是一种糟糕的做法？
React的钩子是React函数组件中用于添加状态和其他React特性的函数。useState是React提供的一个钩子函数，用于在函数组件中添加状态。
在没有使用useState的情况下改变不应该被修改的变量是不推荐的做法。这是因为React的设计原则之一是单向数据流，组件的状态应该通过props或useState来管理和更新。直接修改不应该被修改的变量可能会导致不可预测的结果，并且违反了React的设计理念。
相反，建议使用useState来定义并管理组件的状态。useState是React提供的一个用于管理组件状态的钩子函数，它接受一个初始状态，并返回一个状态值和一个更新状态的函数。通过使用useState，可以在函数组件中定义和更新状态，使得状态管理更加清晰和可控。
举例来说，假设有一个计数器组件，我们可以使用useState来定义一个计数器状态：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}在上面的例子中，useState(0)定义了一个名为count的状态变量，并将其初始值设置为0。setCount是用于更新count状态的函数。通过点击按钮，可以调用setCount来更新count的值，从而实现计数器的增加功能。
总结来说，改变不应该被修改的变量而不使用useState是一种糟糕的做法。推荐使用useState来管理组件的状态，并按照React的设计原则进行开发。
腾讯云提供了云服务器、云开发等产品，可以用于部署和运行React应用。具体可参考腾讯云的产品文档：
相关·内容
1回答
如何检测传递的函数是否是React Hook函数？ isHook(useState); // return true
isHook(() => {}); // return false; 我需要知道对象属性的附加函数是不是钩子。如果它是来自另一个函数的“普通函数”，我需要调用该函数。
浏览 16提问于2019-03-25得票数 1
3回答
我有一个axios配置文件，我在该文件中调用react钩子{Auth Context}，目的是在中获取令牌。但是我得到了一个类似于的错误“React 'useAuth‘不能在顶层调用，必须在React函数组件或自定义React函数”中调用React。
AuthContext.js
import React, { useContext, createContext, useState } from "react";
const AuthContext = createContext();
export function useAuth() {
return use
浏览 7提问于2021-09-26得票数 1
我正在尝试测试custom hook。我想知道是不是setState函数触发。这是我的自定义钩子
import React from "react";
import axios from "axios";
export default () => {
const [state, setState] = React.useState([]);
const fetchData = async () => {
const res = await axios.get("https://5os4e.csb.app/data.json&
浏览 0提问于2020-07-25得票数 0
我知道如何在类组件中使用钩子的一种方法是让一个HOC返回一个函数组件，在它里面我们可以调用钩子并将prop传递给一个类组件。看看乔尔·考克斯的How can I use React hooks in React classic class component?和答案。 现在问题来了，以https://reactjs.org/docs/hooks-custom.html#using-a-custom-hook为例，考虑我们有一个钩子useFriendStatus，它接受一个friendID，具有订阅该朋友的在线状态的效果，并在每次重新呈现时进行清理，因此对于新的friendID，钩子可以订阅新
浏览 29提问于2021-08-14得票数 1
Previous render Next render
------------------------------------------------------
1. useState useState
2. useContext useContext
3. useEffect useEffect
4. undefined useState
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
浏览 18提问于2019-09-13得票数 8
使用React钩子，如果我们需要更新大型状态数组的一个元素，那么直接修改状态然后用它调用set是反模式吗？或者，是否有必要先复制一个巨大的数组，然后再传递给set()？我希望避免在每次状态更改时都复制大型数组。下面的代码是不是很糟糕？ const [bigArray, setBigArray] = useState(Array(SOME_HUGE_NUMBER).fill(false));
bigArray[15] = true;
setBigArray(bigArray);
浏览 12提问于2020-07-04得票数 0
回答已采纳
1回答
我遇到了一个问题，我想要触发一个函数或其他东西，如果在加速度传感器的x轴上有一个特定的数字，就会对一个数字进行计数。我尝试了一个站在渲染部分的函数，但有一个问题，它不计入。
在那之后，我尝试将它写在钩子中，然后我得到了这个错误。
这就是我到目前为止所得到的
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Accelerometer } from
浏览 0提问于2020-02-14得票数 0
这是我第一次开发react应用程序。我打算在用户单击按钮时进行Api调用。可以直接从事件调用钩子吗？如果是，如果钩子来自不同的组件，我如何调用它？
这是按钮(不同的组件)
const paginationButtons = (
<React.Fragment>
<Button onClick={() => viewDetails()}>View Details</Button>
</React.Fragment>
);
function viewDetails() {
//Is it Possibl
浏览 3提问于2019-05-27得票数 9
我不明白为什么react窗口会在每个(所有) useState events上重新呈现列表，这些值甚至没有连接到列表本身。请有人解释一下，这是如何内部联系，我如何可以避免那些重新渲染？
import React, { useState } from "react";
import { FixedSizeList, areEqual } from "react-window";
function App() {
const [count, setCount] = useState(0);
const handleOnClick = ()
浏览 1提问于2021-10-07得票数 1
回答已采纳
我是react的初学者，我读到过我们不应该直接更新钩子变量，而应该通过setState更新。在我的代码中，我将一个状态变量作为对象分配给另一个变量，然后对其执行console.log操作。这是不是一个坏的做法，因为它暴露了我的item钩子变量？
const [item,setItem] = useState({fruit:'apples'});
let dummy = Object.assign({},item); //is this a bad practice ?
console.log(dummy);
我使用Object.assign()来克隆对象，这样它就不会像dum
浏览 22提问于2021-03-07得票数 0
1回答
我有以下自定义钩子：
import { useEffect, useState } from 'react';
import { AuthType } from '../types';
export function useAuth() {
const [ authData , setAuthData ] = useState<AuthType>();
useEffect(() => {
if ( authData && authData.JWT ) {
localStorage.setItem
浏览 1提问于2021-07-08得票数 0
回答已采纳
我正试着为一个项目建立一个倒计时网站。我希望倒计时由一个按钮触发。我用的是React，但我一直收到这个错误
React "useEffect“在函数”倒计时“中被称为”倒计时“，它既不是React函数组件，也不是自定义React函数。React组件名称必须以大写字母开头。
我反应很新，有人能给我一些建议来解决这个问题吗？
守则：
import './App.css';
import React, { useEffect, useState } from 'react';
function App() {
const time = 20;
con
浏览 2提问于2021-04-06得票数 1
我得到了这个错误...
5440 | this.bindModules();
5441 |
> 5442 | if (this.element.tagName === "TABLE") {
| ^ 5443 | if (this.modExists("htmlTableImport", true)) {
5444 | this.modules.htmlTableImport.parseTable();
5445 | }
当我尝试使用时。
import React, { useState, useEffect
浏览 5提问于2020-02-21得票数 0
伙计们，我知道这个错误在这里已经问了很多次了，但我仍然对此感到困惑。所以我试着调用下面的导航栏组件，
import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink} from 'reactstrap';
const [collapsed, setCollapsed] = useSta
浏览 13提问于2020-03-04得票数 1
回答已采纳
我是React的初学者，我正在从udemy课程中学习。最初，我认为在状态更新之后，函数组件中的所有代码都会重新呈现/重新运行。但后来我在重定向之前看到了倒计时的实现，并感到困惑。
import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
const LoadingToRedirect = () => {
const [count, setCount] = useState(5);
let history =
浏览 0提问于2021-10-10得票数 0
在我读完这篇文章后，我仍然有点confused.Why下面的代码useEffect使用了花括号，但没有返回，它仍然可以工作吗？不知道我是不是误解了什么。
示例如下：
import React,{useEffect,useState} from "react"
function App() {
const [resourcetype,setresourcetype]=useState("posts")
useEffect(()=>{
console.log("render")
},[resourcetype])
浏览 0提问于2021-02-19得票数 2
2回答
我正在从和数组中添加文本元素，我喜欢循环这些元素并更新claas名称。
我选择具有当前类名的元素，我也想添加新的类名。
是否可以添加新的类名，比如
element.className={'selected'}
=
import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
浏览 2提问于2020-02-09得票数 2
回答已采纳
我用的是React，useState和React图标。
我的意图是创建一个下拉菜单(没有引导)。我想在单击时更改图标(以插入函数)，但输出是原始的SVG细节。有什么想法吗？
import { IoMdArrowDropdownCircle, IoMdArrowDropupCircle } from "react-icons/io";
function navBar() {
const navToggle = () => {
const [navMenuToggle, changeNavToggle] = useState(true);
浏览 5提问于2022-05-26得票数 0
1回答
我正在使用这个优秀的示例(Nested sidebar menu with material ui and Reactjs)为我的应用程序构建一个动态嵌套菜单。最重要的是，我试图更进一步，把它放到一个实体UI appbar/临时抽屉中。我想要实现的是当用户单击最底层的项目(SingleLevel)时关闭抽屉，但是我很难将toggleDrawer函数向下传递到菜单。当我在SingleLevel上处理点击时，我总是得到一个‘切换不是一个函数’的错误。 我对此相对较新，所以我相信这是一件简单而明显的事情。非常感谢您的回复/评论。 编辑:这是一个沙盒链接https://codesandbox.io/
浏览 13提问于2021-10-13得票数 0
2回答
在我想要重用的组件中有一个formik表单。为了做到这一点，我需要侦听表单值的更改，以便调用两个函数，getFormValues和getFormErrors，它们将由父组件传递：
import React from "react";
import * as Yup from 'yup';
import { Formik } from 'formik';
import CheckBox from "@react-native-community/checkbox";
import { Text, TextInput } from &
浏览 15提问于2022-01-23得票数 0
1回答
多变量与一个对象之间的差异
、、、、
我对编程和反应很陌生。我试图寻找这个，但没有找到什么好的概念，这一点。
我想知道这两种方法之间的区别是什么:声明具有3个属性的对象或声明3个变量。
哪一个性能更好，资源更好？他们会占用同样数量的内存吗？
@observable response = {
foo: null,
bar: null,
baz: null
}
对
@observable foo = null;
@observable bar = null;
@observable baz = null;
const [response, setResponse] = React.useState({foo:
浏览 1提问于2020-07-05得票数 0
1回答
我需要有反应经验的人来检查我的代码。
我想用Lodash来做一次决斗。
import debounce from 'lodash/debounce'
const [name, setName] = React.useState<string | undefined>(undefined)
const [displayedName, setDisplayedName] = React.useState<string | undefined>(undefined)
const changeName = debounce((e: domProperty) =
浏览 0提问于2021-08-09得票数 0
在下面的代码中，如何使status变量的值在setStatus(!status)之后立即更改？我知道React中的状态更新是批处理的，因此我使用的是带有回调的useEffect，但是在第一个按钮单击时，status的值仍然被记录为false (好像它没有立即改变一样)。
考虑到应用程序呈现在任何方面都不依赖于status变量(实际上，我甚至希望这个变量的更改不会触发呈现)，那么不使用useEffect并将status改为“正常”变量(像status = true一样)是否是一种糟糕的做法？
function App() {
const [status, setStat
浏览 8提问于2020-07-07得票数 1
回答已采纳
我正在尝试创建一个应用程序，使用shopify graphql api创建一个电子商务应用程序，在react本地博览会上使用。
我有一个onPress，它调用一个setState来更改graphQL变量的状态，但是结果不会从'currentSubCategories‘的初始状态改变。
const [currentSubCategories, setSubCategories] = useState(Categories[0].subCategory[0].handle);
let {
collection,
loading,
浏览 0提问于2020-06-26得票数 0
回答已采纳
我正在使用nextJS，在这里遇到了一个小问题，不知道我哪里出错了。我已经构建了一个应用程序，在这个应用程序中，所有的东西都可以在dev中工作。然而，我正在尝试构建我的应用程序，但我收到了错误：
./pages/genre.js/genre.js 13:18错误: React "useRouter“是在函数”useRouter“中调用的，它既不是function函数组件，也不是自定义React函数。React组件名称必须以大写字母开头。名称必须以“使用”一词开头。反应钩/钩规则
useRouter位于我的页面上，名为genre.js，详细说明如下：
import React fro
浏览 8提问于2022-09-15得票数 2
您好，为什么react中的组件没有呈现？状态已更新，我在开发人员工具中看到它，但内容没有更改
完整代码：
import React, {useState} from 'react'
const List = (props:any) => {
const [actToDo, changeActTodo] = useState(props.actToDo)
const [ToDoLists, changeActToDoLists] = useState(props.ToDoLists)
return (
<>
浏览 9提问于2021-12-04得票数 0
1回答
我在react native (expo)中遇到了一个奇怪的问题。我的模式如下所示： const useNewCommentModal = () => {
const [showModal, setShowModal] = useState(false);
const [comment, setComment] = useState('');
const toggle = () => {
setShowModal(!showModal);
};
const NewCommentModal = () =&g
浏览 17提问于2020-03-18得票数 0
回答已采纳
问题是，每次我将鼠标悬停在标记上时，都会打开或关闭一个弹出窗口，它会导致所有标记重新呈现，即使我的状态没有改变。每次我悬停在标记内和标记外时，console.log(myState);都在运行。 我试着使用useMemo钩子，但不知道如何在country.map上使用它。有什么帮助吗？ 下面是我的代码： import React, { useEffect, useState } from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import axios fr
浏览 54提问于2020-03-28得票数 0
我想创建一个名为Api的react上下文，其中包含一些负责登录的函数，等等。我从我所从事的项目中复制了一些代码，但该项目是简单的js并作出反应。我想实现它的反应本机与类型记录。这是守则：
App.tsx：
import React from 'react'
import { SafeAreaView, StatusBar } from 'react-native'
import Api, { useApi } from './src/context/Api'
import Test from './src/components/Test&
浏览 4提问于2021-02-06得票数 0
回答已采纳
我想在一个常规函数中使用我的自定义钩子，如下所示，但是React不让我这么做。我想知道是不是我的useUrl自定义钩子无效，或者调用钩子有问题。 const handleAddFormation = async () => {
console.log('add formation')
await useUrl('POST', 'http://localhost:1337/formations', newFormationList)
setNewFormationList([])
setModalOpen
浏览 91提问于2021-08-29得票数 1
我从AWS DataStore中获取数据，当从DataStore获取购物车项数据时有一个无限循环。我不知道这个循环是从哪里来的。我试图用fetchCartItems函数包装useCallback，也从useEffect钩子中删除了依赖项，但是没有什么改变。当我控制台记录cartProducts时，我会得到这个无限循环。
这是购物车项目上下文。
import React, {
useState,
useEffect,
useContext,
createContext,
useCallback,
} from "react";
import { DataSto
浏览 4提问于2022-07-20得票数 0
我尝试创建一个简单的meme生成器，用户可以在其中添加文本并在单击时更改图像。两者都在工作，但我的clear按钮只清除输入字段，不会返回到第一个图像(arrayo)。我的意思是，如果我元素“conole.log”，它是"0“，但它不会改变图像为第一个。
到目前为止，我的App.js代码：
import React, { useEffect, useState } from "react";
import "./styles.css";
function useCounter(initialCount = 0) {
const [count, set
浏览 15提问于2020-11-14得票数 0
回答已采纳
2回答
我试图在React中的一个函数中使用useParams()钩子，但是它给出了以下错误
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a
function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might b
浏览 2提问于2022-01-23得票数 1
1回答
我有根据采样大小创建的数组列表。当我用整个新数组setState数组时。我得到了一个无限循环的错误。
码
const sampleData = _.fill(Array(200), 0)
const [value, setValue] = useState(sampleData)
setValue(value.fill(100)) // Error
误差
错误:太多的重新呈现。React限制呈现的数量，以防止无限循环。
浏览 1提问于2020-08-22得票数 0
回答已采纳
1回答
将procs分配给常量
、、、
我发现procs和lambdas可以用来替代短方法和助手模块。我将不属于其他任何地方的方法放入一个文件中，该文件只是一个分配给常量的procs列表。例如，init.rb需要一个文件helper_procs.rb，它包含以下内容：
RED_TEXT = proc{|t| "\e[31m#{t}\e[0m"}
GREEN_TEXT = proc{|t| "\e[32m#{t}\e[0m"}
YELLOW_TEXT = proc{|t| "\e[33m#{t}\e[0m"}
CURRENT_TIME = proc do
date = Time.
浏览 0提问于2013-06-08得票数 1
回答已采纳
我很难理解如何最好地组织我的代码，以便在React中设置初始的useState()，同时使用GraphQL和阿波罗来获取数据。这是我的密码。正如您所看到的，我希望看到“数据”的一部分来设置初始状态，但是当我将setSTate移动到加载和错误行以下时，会得到以下错误：
React "useState“是有条件的。在每个组件呈现中，必须以完全相同的顺序调用React。你是不是在早早回来后不小心叫了个反应钩？反应钩/钩规则
我该如何更好地组织这个？我是否必须使用阿波罗的状态管理库，因为我更喜欢使用React钩子。
const GET_LATEST_POSTS = gql`
query {
&
浏览 2提问于2020-03-18得票数 7
我正在使用React和Material UI创建一个带有一些按钮的表格(XGrid)。当您单击该行时，它应该使用useState设置行id。当您单击delete按钮时，应该会删除该行。似乎删除单击处理程序没有使用来自use状态的值。这要么是某种封闭的东西，要么是某种反应的东西。 const MyTableThing: React.FC = (props) =>
{
const { data } = props;
const [filename, setFilename] = React.useState<string>("")
const [c
浏览 25提问于2021-07-07得票数 2
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
回答已采纳
以下是我的代码 import React, { FC, useState,useMemo } from "react";
const FormSearch: FC<{ params: string }> = ({
params
}) => {
const [category, useCategory] = useState<string>("All");
const [search, setSearch] = useState<string>("");
useMemo(() =&g
浏览 31提问于2019-06-07得票数 7
我似乎找不到是什么导致了无效的钩子调用，即使我的钩子实际上是在一个函数组件下。也许有人可以帮我从字面上指出它，我正在尝试多种方法来消除这个错误。
这是我的Login.js
import logo from '../logo.svg';
import React, { useState } from 'react';
import {
Browser,
Redirect,
Route,
Switch
} from 'react-router-dom';
import userDashboard from './user
浏览 0提问于2021-05-30得票数 0
请帮帮忙，我正在转圈(新来的反应)。
我要么得到'React‘useState是有条件的’，如果我将它更改为下面的代码，
我得到'React‘useEffect是有条件的’。
我的想法是
如果数据为空，则通过useQuery和db记录id检索数据，例如，查询使用id=0 (就像插入而不是更新记录)，然后使用deviceObject到空记录，否则使用检索到的数据。将'deviceObject‘设置为状态。
也就是说，顺序很重要，但是setRow只应该被调用一次，而不是多次调用，这会导致过多的呈现导致崩溃。
export default function DeviceMod
浏览 2提问于2021-10-15得票数 0
回答已采纳
这是我的第一个反应项目，所以如果这是一个基本问题的话，请提前感谢您的支持。我有两个范围输入，当这些范围输入被移动时，我尝试执行计算和更新内容。这是我的档案：
index.tsx
import * as React from 'react'
export default function Index() {
let hours = React.useState(2)
const setHours = (newHours) => {
hours = newHours;
setPrice(hours, price);
}
let miles
浏览 14提问于2022-12-01得票数 0
回答已采纳
有一个，我不太明白它在说什么：
只从React函数调用钩子
不要从常规的JavaScript函数调用钩子。相反，你可以：
✅从function函数组件调用钩子。
✅从自定义钩子调用钩子(我们将在下一页了解它们)。
通过遵循此规则，您可以确保组件中的所有有状态逻辑在其源代码中都是清晰可见的。
仅仅从调用Hooks意味着什么?一个function函数与我所称的普通函数组件有什么不同？
在我看来它们是一样的：
const App = () => {
useEffect(() => //do stuff);
return (
// return s
浏览 2提问于2019-06-01得票数 7
回答已采纳
1回答
这是错误消息
react-dom.development.js:11340 Uncaught TypeError: Cannot read properties of undefined (reading 'search')
at Login (Login.js:21:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.developmen
浏览 4提问于2022-02-18得票数 0
回答已采纳
我已经将代码从组件更改为钩子。我对它完全陌生，我正在学习react，我需要帮助将它转换为钩子，我应该做些什么来使它在功能反应上工作呢？
最新情况：
我已经发布了下面的解决方案，但是当我单击输入时，它会将我带到页面的顶部。
const [nameFocused, setNameFocused] = useState(true);
<FormGroup
className={classnames("mt-5", {
focused: nameFocused,
浏览 5提问于2020-10-25得票数 5
回答已采纳
2回答
反应钩状态管理
、、
我在我的反应项目中使用钩子。
我写了一个用钩子来管理国家的函数。
但我不知道这是不是最理想的。
这是我的功能: mapStateToDOM.js
import {useState} from 'react';
const mspStateToDOM = (initialState, state) => {
Object.keys(initialState).map(item => {
let [current, setCurrent] = useState(initialState[item]);
state[item] =
浏览 5提问于2020-03-12得票数 1
回答已采纳
我的useEffect()每次都在页面加载时运行。我要它运行后，我点击一个按钮。我的代码如下：
import React, { useState , useEffect } from 'react';
const HooksDemo = () => {
const [myArray, setMyArray] = useState([]);
useEffect(() => {
if(myArray) {
console.log("My Array : ",myArray)
浏览 1提问于2020-11-05得票数 1
回答已采纳
我有个问题。我相信这是一个简单的问题，但实际上我不知道问题是什么。我有一个定制钩子：
const goodsSetupWizardController = (props) => {
const [product, setProduct] = useState(props.product);
const getComponent = (step) => {
//...
};
const isNextButtonDisabled = (step) => {
//...
};
const need
浏览 19提问于2022-07-24得票数 0
2回答
反应高阶函数返回钩子
、、、、
目前，我有一个用javascript编写的自定义抓取数据钩子，它可以正常工作
import {useState, useEffect} from 'react';
const useApi = apiName => id => {
const [response, setResponse] = useState();
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
const fetching = async () =&
浏览 2提问于2020-05-07得票数 1
3回答
我在读反应钩子的概念。我通过了一条规则，上面写着Don't call React hooks inside conditions。在这里，他们提供了解释。
function Form() {
// 1. Use the name state variable
const [name, setName] = useState('Mary');
// 2. Use an effect for persisting the form
useEffect(function persistForm() {
localStorage.setItem(
浏览 3提问于2020-07-08得票数 5
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
