为什么我不能在react钩子的初始状态下使用数组
在React中，钩子（Hooks）是一种允许你在函数组件中使用状态和其他React特性的方式。当你在使用useState钩子设置初始状态为一个数组时，可能会遇到一些问题，这通常是由于React的状态更新机制和JavaScript的引用传递方式导致的。
基础概念
- React Hooks：Hooks是React 16.8版本引入的新特性，它允许你在不编写class的情况下使用state和其他React特性。
- useState：
useState是React提供的一个Hook，用于在函数组件中添加状态。 - JavaScript引用传递：在JavaScript中，对象（包括数组）是通过引用传递的。这意味着如果你直接修改数组，React可能无法检测到这种变化。
相关问题及原因
当你尝试在useState的初始状态中使用数组时，可能会遇到以下问题：
- 状态更新不生效：如果你直接修改数组（例如使用
push方法），React可能无法检测到这种变化，因为数组的引用没有改变。 - 初始状态计算复杂：如果你的初始状态是一个复杂的计算结果（例如从API获取的数据），直接在
useState中定义可能会导致性能问题。
解决方法
- 使用函数式初始状态： 如果你的初始状态需要复杂的计算，可以使用函数式初始状态。这样，每次组件重新渲染时，都会调用这个函数来计算初始状态。
- 使用函数式初始状态： 如果你的初始状态需要复杂的计算，可以使用函数式初始状态。这样，每次组件重新渲染时，都会调用这个函数来计算初始状态。
- 使用不可变数据结构：
为了避免直接修改数组导致的状态更新问题，可以使用不可变数据结构。例如，使用
slice、concat或扩展运算符来创建新的数组。 - 使用不可变数据结构：
为了避免直接修改数组导致的状态更新问题，可以使用不可变数据结构。例如，使用
slice、concat或扩展运算符来创建新的数组。 - 使用第三方库：
可以使用一些第三方库来处理不可变数据结构，例如
immer。 - 使用第三方库：
可以使用一些第三方库来处理不可变数据结构，例如
immer。
应用场景
这些方法在以下场景中特别有用：
- 复杂初始状态：当初始状态需要复杂的计算或异步操作时。
- 频繁更新：当组件需要频繁更新数组状态时。
- 避免不必要的渲染：通过使用不可变数据结构，可以避免不必要的组件重新渲染。
参考链接
通过以上方法，你可以有效地解决在React钩子初始状态下使用数组时遇到的问题。
相关·内容
我有一个数组，它是从一个firebase数据库查询中生成的。
我希望将其保存在状态中，以便随着数据的变化，它将重新呈现屏幕。
我似乎无法将状态的值转化为我的函数。如果我将数组中的值放入，它就能工作，但当数据发生变化时，它不会自动重新呈现。
用数组来截图..。注意，控制台日志正在打印状态是否正确设置。
这里有一个错误
它必须在第101行左右，但我不能找出正确的语法来使它工作。
更新:我没有初始化状态，这是错误的一部分.
import React, { Component } from 'react';
import Flexbox from 'flexbox-
浏览 2提问于2017-09-14得票数 0
回答已采纳
我有一个，这里我使用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
我给了if在useEffect()中等待获取数据的条件。
invoice && invoice['data']就像这样。
我的期望是setMoney()会起作用。但它只是传递这个函数。
invoice从存储中获取数据。
这是观景台。
import React, {useContext, useEffect, useState} from 'react';
import './invoice.scss';
import InvoiceFilter from './invoice_filter';
import Inv
浏览 1提问于2021-05-12得票数 0
回答已采纳
我正在尝试构建一个登录身份验证系统，当用户使用护照身份验证模块介绍他的所有细节时，用户将被重定向到带有history模块的主页。但是这样做后，当我查看了堆栈溢出中的其他一些解决方案时，mme在意外地使用history时出现了一个使用错误，而且它们似乎都是这样工作的。
import React, {useState} from 'react'
import './login.css'
import axios from 'axios'
import { useHistory } from "react-router-dom";
浏览 0提问于2021-07-25得票数 1
回答已采纳
下面的错误有时会发生，我不知道为什么。似乎每一段代码都正常工作，但只有一个错误发生。
React "useEffect“不能在回调中调用。必须在或自定义React函数-钩子/钩子规则中调用React，以搜索关键字以了解每个错误的更多信息。
import { useEffect, useState } from 'react'
import { useAuthContext } from 'src/contexts/Auth'
import { brandRepository } from 'src/repositories/BrandRe
浏览 12提问于2022-04-17得票数 2
回答已采纳
我学习了React，但不知道如何修复这个简单的错误：
我有一个。
我有这样的代码：
/* eslint-disable react/prefer-stateless-function */
import React from 'react';
import { useNavigate } from 'react-router-dom';
import AuthUserContext from './context';
const WithAuthorization = condition => Component => {
浏览 8提问于2020-12-16得票数 3
1回答
我不知道为什么在通过React查询使用突变时会出现这个错误。任何形式的反馈都将不胜感激。
注意:我在一个函数(React)组件中使用，所以我不知道为什么会抛出这个错误。
错误：
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
浏览 4提问于2022-05-03得票数 -1
我试图写一个from，但是它抛出了这个错误：
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 be breaking the Rules of Hooks
3. You m
浏览 5提问于2019-10-21得票数 1
回答已采纳
这里我有一个加载屏幕作为一个功能反应组件，我试图在App中有条件地呈现它。这个加载屏幕的概念是，我有一个布尔变量，用于在加载屏幕结束后有条件地呈现主页。
import React from 'react';
import { useState, useEffect } from 'react';
import { useSpring, animated } from 'react-spring';
import BarLoader from 'react-spinners/BarLoader';
import Logo fro
浏览 3提问于2021-03-23得票数 1
回答已采纳
我被困在无效的钩子警告。这是一个第三方依赖，这也使得它难以控制。但这是一个引起问题的密码，
export class Component {
constructor() {
this._initReact();
}
_initReact(displayName) {
const component = React.forwardRef((props = {}, ref) => {
const _a = Object.assign(Object.assign({}, this._props), props),
浏览 3提问于2021-06-12得票数 0
回答已采纳
2回答
我尝试在useEffect中更新数据，但在控制台中显示警告。
React Hook useEffect has missing dependencies: 'dispatch', 'id', and 'state.selectedHotel'. Either include them or remove the dependency array react-hooks/exhaustive-deps
码
import { GlobalContext } from "../../../context/globalContext";
浏览 10提问于2021-06-24得票数 2
回答已采纳
我用的是react，这是我的代码。
import { useEffect, useState } from "react";
const Test = (props) => {
const [sort, setSort] = useState(1);
const [albums, setAlbums] = useState([
{
"userId": 1,
"id": 1,
"title": "A letter
浏览 5提问于2021-11-18得票数 0
回答已采纳
我用的是反应。我正在使用材料表来获取可编辑表的数据。但是我得到了一个像图片一样的错误，我如何纠正这个错误呢？
我使用useState作为表的编辑设置。请你帮我处理一下错误好吗？
在接收数据时，我不会收到任何错误。我只使用表上的编辑作为活动/非活动。forceUpdate = useState (假)，setData = useState (drBounty)；
给出了行的错误。
错误的屏幕截图和下面的源代码
import React, { Component, useState } from "react";
import withAuth from ".
浏览 1提问于2020-03-22得票数 0
回答已采纳
1回答
我有这个自定义钩子来从firebase获取当前用户：
import React, { Component, useEffect, useState } from 'react';
import { auth } from "../firebase/auth-service"
const useFirebaseAuthentication = (firebase) => {
const [authUser, setAuthUser] = useState(null);
try {
auth.onAuthStateChang
浏览 2提问于2021-01-13得票数 0
我是第一次接触reactJs。我使用react-bootstrap并使用<Form.Control as = 'select'>显示数据库中的选项。
代码如下：
<Form.Group controlID="Department">
<Form.Label>
Department
</Form.Label>
<Form.Control as = 'select'>
{this.state.deps.map(dep =>
浏览 0提问于2021-05-02得票数 1
我正在尝试使用wikipedia API。我正在使用Axios来请求数据。当我通过从App的状态传递的属性来映射时，我得到了以下错误：
Uncaught TypeError: search.map is not a function
我已经检查了预期的值是一个数组。看起来是这样的，我可以在react开发工具控制台中操作它。它也有一个Array的原型，所以我很困惑为什么我不能这样做。
根组件：
class App extends React.Component
{
constructor()
{
super();
this.state = {search: {}}
浏览 3提问于2016-12-01得票数 0
1回答
我有一个从梅花反应里挑选出来的成分。我也使用反应钩形式与控制器。在控制器中，我将设置defaultValue，因为我想使用重置函数vonReacti-钩子形式。但是，当我设置默认值时，我不能更改该值。当没有默认值时，任何事情都会按预期工作。在这里，我的守则：
import * as React from "react";
import { useTheme } from "@mui/material/styles";
import OutlinedInput from "@mui/material/OutlinedInput";
import I
浏览 5提问于2022-06-24得票数 0
在我的react本机应用程序中，我已经开始使用自定义钩子，我创建了一个钩子来检索用户坐标，但是当我的useGeolocation钩子被调用时(在handleUpdateLocation方法中)，我总是收到以下警告：
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 Rea
浏览 14提问于2022-09-06得票数 -1
2回答
我正在尝试在我的类中设置useEffect挂钩(用于监听路由更改)，其定义如下-
export default class AppManger extends Component{
//constructor
//componentWillMount
//reneder
//...
}
我的其他钩子已经定义好了，并且可以正常工作，但是当我尝试定义useEffect时-
useEffect(() => {
const { pathname } = location;
console.log('New path:'
浏览 2提问于2020-05-20得票数 2
我使用的是素材ui，当我使用菜单组件时比得到错误的错误:无效的钩子调用。钩子只能在函数组件的主体内调用。I使用的是使用Axios的material框架。我用Axios来使用框架。我使用的是使用Axios API的物料用户界面框架。
import React, { Component } from 'react'
import ApiService from "../../service/ApiService";
import Table from '@material-ui/core/Table';
import TableBody from &
浏览 5提问于2020-04-22得票数 0
我试图使用react导航在两个页面之间移动，Selecttype.js和doctorlogin.js，其中Selecttype.js是initialRouteName，有一个按钮，当有人单击它时，它将重定向到doctorlogin.js。initialRoute正在加载，但我无法使用onclick()事件访问onclick()。
App.js：(路由器)
import React from 'react';
import 'react-native-gesture-handler';
import { NavigationContainer } from
浏览 1提问于2020-12-19得票数 0
我目前正在完成一个前端导师的挑战，其中包括建立一个互动的评论部分。在这个项目中，我希望用户能够连续地相互回复，因此我使用了一个递归组件。
我将粘贴这两个违规组件的代码。
以下是我的注释组件代码
// Comment.jsx
import { useEffect } from "react";
import ReplySection from "./ReplySection";
const Comment =({content, upvotes,image,username, isUser, replies, replyMethod, createdAt, id
浏览 9提问于2022-05-09得票数 2
回答已采纳
我们正在开发一款智能手机应用程序，它使用的是React-本机。我使用了react本机-安全区域-上下文来获得iPhone 12上凹槽的高度。但是，我得到以下错误：
Invariant Violation: 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 r
浏览 4提问于2021-04-11得票数 0
1回答
请帮助重构从React到类组件的一些代码，好吗？我是新来的，这让我很难过。我知道{ useState }提供了一些"getter“和"setter"，但不知道如何在”典型“React类组件中使用道具将其重构为状态。
钩子：
export default function App() {
const [counter, setCounter] = useState([]);
}
反应：
class App extends React.Component {
state = {
counter:
}
浏览 0提问于2019-03-24得票数 0
回答已采纳
3回答
我试图在react类中实现数据报警器，在这个过程中，我已经在一个过程中声明了const，我正在处理的react类，我正在得到解析error.Could，请帮助这里，声明有什么问题吗？
import React,{useState} from 'react';
import ReactDOM from 'react-dom';
import {Card, Container,Table,Form,InputGroup,Col,Button} from 'react-bootstrap';
import DatePicker from "re
浏览 3提问于2020-11-19得票数 2
回答已采纳
1回答
我有一个应用程序，它使用类组件语法创建到目前为止的所有组件。使用这些包版本：
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
我试图把我的路线参数到我的组件。所以我开始说：
<Routes>
<Route path
浏览 3提问于2022-07-27得票数 0
为什么在反应中会出现上述错误？-如果我取出useState for 'count2‘in Person.js，它工作得很好--但这肯定会奏效吗？
我有两个文件: Persons.js，它呈现一个Person.js列表。“‘people”数组被传入
import React, { useEffect, useRef, useContext, useState } from 'react';
import Person from './Person/Person';
const Persons = (props) => {
const [c
浏览 1提问于2020-10-27得票数 1
回答已采纳
1回答
我有一个功能组件，它在页面加载时从http请求中检索数据，并更新状态以使用useState存储数据。然后我尝试从数据中映射一个嵌套数组(polls.pollOptions)，得到一个错误："TypeError:无法读取未定义的的属性' map‘“。如果我删除map函数并检查function组件扩展，我可以看到状态被更新了，并且它有正确的数据。那么，为什么这不呈现到屏幕上&为什么在数据需要映射时接收一个错误呢？这是我的组成部分：
import React, { useState, useEffect } from "react";
import axios
浏览 1提问于2021-05-02得票数 3
回答已采纳
3回答
我正在尝试实现一个静态方法，以使我的代码更简洁。在我试着这么做之前，它一直运作得很好：
// Auth.js
import {useDispatch} from 'react-redux';
import {signOut} from './redux_actions';
export class Auth {
static signOut = () => {
const dispatch = useDispatch();
dispatch(signOut())
}
}
// Menu.js
import
浏览 2提问于2019-10-23得票数 0
回答已采纳
我正在尝试使用UseEffect react钩子，但收到错误: React hook "useEffect“在函数"cockpit”中被调用，该函数既不是React函数组件，也不是自定义React Hook函数 import React, { useEffect } from "react";
import styled from "styled-components";
import "./cockpit.css";
// it is a css code
const StyledButton = styled.button
浏览 35提问于2020-07-26得票数 0
回答已采纳
虽然我编写的代码在浏览器中工作，但它告诉我，在下面的代码中，构造函数的使用是不可取的和无用的。
`class ArrList extends React.Component{
constructor(props){
super(props)
}
render(){
const {array} = this.props;
const arrList = array.map((arr) => <List key={arr} li={arr} />)
return arrList;
}
}`
enter code
浏览 5提问于2021-03-04得票数 1
我将REACT路由器DOM从V6升级为V5，我使用了REDUX，并且在COMMON.ACTION中有一个名为CHANGE路由的通用函数，直到现在我使用了HISTORY.PUSH，在更新之后，我需要更改它以使用导航，但是每次更改它时，我都会得到以下错误
错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React的不匹配版本和呈现器(例如React )，您可能正在违反Hooks的规则，您可能在同一个应用程序中有多个React副本。
现在我知道我违反了钩子规则，但我不知道为什么changeRoute是一个函数，我做错了什么？
谢谢你的帮忙
这是我的应用程序
浏览 2提问于2022-01-06得票数 0
1回答
我在我的Airtable块扩展中得到了这个错误: Error:无效钩子调用。钩子只能在函数组件的主体内调用。
我不知道为什么。我的程序使用airtable创建一个下拉列表，在useState更新数据库之前设置一个useEffect值。这两个钩子都是在函数体中使用的，函数应该是一个反应性组件，所以我不知道错误在哪里。我已经看到，这可能是因为响应版本冲突等等，但我不知道如何确认这是否是根本问题。
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
浏览 16提问于2022-09-06得票数 0
当我使用slice()方法时，我得到："TypeError:无法读取空属性(读‘片’)“。而当我移除方法slice()时，口袋妖怪卡将呈现为列表。不幸的是，我确实需要这个方法来创建分页。有任何等同于slice()的东西吗？还是我做错什么了？
import React, { Component } from 'react'
import axios from 'axios'
import ReactPaginate from 'react-paginate';
import PokemonCard from './PokemonC
浏览 5提问于2022-09-05得票数 0
回答已采纳
1回答
所以我有一个名为Context.js的文件，如下所示：
const AppContext = createContext({
// ... scheme colour palette
color1: '#ADBDDB',
color2: '#7F8EB2',
color3: '#546287',
color4: '#384366',
// ... grey colour palette
grey1: '#FFFFFF',
grey7: '#2A3033',
浏览 4提问于2021-06-09得票数 0
当我从子组件提交表单时，如何更新定义了父contex api的类的状态？
import React, {createContext,Component} from 'react'
import http from './services/httpService'
import {MyApiUrl} from './services/httpService'
export const GlobalState = createContext()
export class DataProvider extends Component{
浏览 4提问于2021-11-03得票数 0
1回答
我尝试直接从样式访问useTheme()，但到目前为止，我的解决方案似乎不起作用。我不会再犯错误了。有没有办法做我想做的事？ import { StyleSheet } from "react-native";
import { useTheme } from '@react-navigation/native'
export default function () {
const { colors } = useTheme();
const styles = GlobalStyle
浏览 25提问于2020-12-12得票数 2
回答已采纳
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
回答已采纳
在向外部API发出post请求后，我想重定向到主页。我确实对React有一些了解，这是我第一次使用Next.js。以下是代码：
export default function New({genres}) {
const createMovie = (values) => {
console.log(values);
axios.post(`${process.env.NEXT_PUBLIC_BASE_URL}/movies`, {
title: values.title,
description: values.description,
浏览 6提问于2021-02-05得票数 1
回答已采纳
1回答
我正在Next.js中创建一个随机的单词生成器。我使用useState管理三个随机生成的单词的状态。然而，当我这样写时，React给了我一个错误消息：
const [word1, setWord1] = React.useState(generateWord());
错误消息：
Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
为
浏览 12提问于2022-10-18得票数 2
回答已采纳
过去是：
class App extends Components{
//...
}
现在，create-react-app在App.js中有这个
function App(){
//...
}
有人知道为什么要做这样的改变吗？他们是在建议我们不应该在App中有状态吗？
浏览 0提问于2019-04-28得票数 6
2回答
我目前正在迁移到antd，并且有一个模式出现在某个路由上(例如，用户ie/信息)。如果我使用antd Modal react组件，我可以做到这一点，但我希望能够使用Modal.confirm、Modal.info和Modal.error等提供的模态方法，因为它们提供了开箱即用的更好的ui。 我遇到了多个问题，比如让模式渲染多次(在删除用户案例中，最初和按下delete后都是如此)，并且由于状态(即在数据到达之前显示加载条)而无法使其更改。这就是我尝试过的，但它不断地呈现新的模态，我尝试了其他方法，但即使isFetching是假的，它也从未改变过显示<Loader />。我不确定还
浏览 28提问于2019-10-01得票数 1
回答已采纳
我正在学习如何创建一个反应减速器，以供在反应上下文中使用。
有人能解释为什么教练两次创建{currentUser: null}对象吗？一次在上下文中(第7行)，一次作为一个INITIAL_STATE在还原器中使用(第26和29行)。有多余的吗？
import { createContext, useReducer, useEffect } from "react";
import {
onAuthStateChangedListener,
createUserDocumentFromAuth,
} from "../utils/firebase/firebas
浏览 4提问于2022-11-25得票数 0
我是个新手，正在尝试从数据库中获取帖子(称为尖叫)，并将它们呈现在主页上。我得到的错误是对象作为React子对象无效，但当我console.log我的(res.data)时，我得到了看起来像是对象数组的东西。谁能帮帮忙，我已经想了好几天了！
下面是我的错误：
Error: Objects are not valid as a React child (found: object with keys {_seconds, _nanoseconds}). If you meant to render a collection of children, use an array instead.
▶
浏览 0提问于2021-02-21得票数 0
在我的React应用程序中，我遇到了一些奇怪的行为，其中setEffect的状态(比如state1)作为第二个参数，在没有调用setState1的情况下改变了另一个变量(而不是状态)。因此，我编写了以下代码，以查看是否会发生相同的情况，并做到了：
import React, { useState, useEffect } from 'react';
function App() {
let [state1, setState1] = useState('');
let count = 0;
useEffect(() => {
co
浏览 1提问于2020-09-25得票数 2
回答已采纳
我正在测试一个反应应用与Jest &酶。当我运行npm run test时，我在UserContext.jsx中得到了在MainPage.jsx中导入的错误。我怎么才能解决呢？
错误消息
不变违反:无效钩子调用。钩子只能在函数组件的主体内调用。这可能发生在以下原因之一: 1. app和呈现器(如React ) 2的版本可能不匹配。您可能违反了Hooks 3的规则。在同一个应用程序中可能有多个React副本。
11 | };
12 |
> 13 | export const useUserValue = () => useContext(Us
浏览 0提问于2020-09-05得票数 1
回答已采纳
我试图理解在useSelector中使用_bootstrapAsync的区别在于它以这种方式失败了
import React, { useEffect,useState } from "react";
import { useSelector } from 'react-redux'
import { ActivityIndicator, StatusBar, View, Text } from "react-native";
export default function authLoading({ navigation }) {
浏览 0提问于2019-12-09得票数 0
我有一个简单的组件示例，它使用useRef()来计算我的组件已经呈现的次数，使用useState()来维护一些状态：
const {useState, useRef} = React;
const App = () => {
const [counter, setCounter] = useState(0);
const renderCount = useRef(0);
const onClick = () => {
setCounter(1);
}
renderCount.current++;
alert("rendering");
浏览 4提问于2021-08-05得票数 3
1回答
嗨，堆栈溢出社区！ 我正在学习react，现在我正在练习自定义钩子。我从这里获得示例数据：https://jsonplaceholder.typicode.com/posts 我有两个组件。 App.js import React from "react";
import useComments from "./hooks/useComments"
const App = () => {
const Comments = useComments();
const renderedItems = Comments.map((comment)
浏览 4提问于2021-01-09得票数 0
回答已采纳
2回答
作为JS世界的新手我遇到了大麻烦..。我用的是反应钩
import { useKeycloak } from '@react-keycloak/web';
import { useCallback } from 'react';
export const useAuthenticatedCallback = (callbackFn) => {
const [keycloak, initialized] = useKeycloak()
const authCallback = useCallback(() => {
/
浏览 1提问于2020-08-21得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
