在setState与useState配合使用后，history.push无法正常工作
在React中，setState和useState是用于管理组件状态的两种常用方法。setState是类组件中的方法，而useState是函数组件中的钩子函数。
当我们在使用setState或useState更新组件状态后，组件会重新渲染。在重新渲染后，如果我们想要进行页面跳转，通常会使用history.push方法来实现。然而，在某些情况下，可能会遇到history.push无法正常工作的问题。
这个问题通常是由于以下原因导致的：
- 组件重新渲染后，
history对象可能会发生变化。在某些情况下，history对象可能不再指向正确的路由历史记录，导致history.push无法正常工作。
解决方法：
- 可以尝试使用
useEffect钩子函数来监听组件状态的变化，并在状态变化时执行相应的操作。在useEffect的依赖数组中添加history对象，以确保在history对象发生变化时重新获取正确的对象。 - 另一种解决方法是使用
useHistory钩子函数来获取history对象，而不是直接使用history对象。useHistory钩子函数会自动处理history对象的变化，确保始终指向正确的路由历史记录。
- 可能存在其他代码逻辑问题，导致
history.push无法正常工作。例如，可能存在条件判断、异步操作或错误处理等问题，导致history.push没有被正确执行。
解决方法：
- 仔细检查代码逻辑，确保在调用
history.push之前没有其他代码逻辑导致其无法执行。 - 可以使用调试工具（如浏览器开发者工具）来跟踪代码执行过程，查找可能的问题所在。
总结：
在使用setState和useState更新组件状态后，如果history.push无法正常工作，可能是history对象发生变化或其他代码逻辑问题导致的。可以通过使用useEffect钩子函数监听状态变化或使用useHistory钩子函数获取history对象来解决该问题。同时，仔细检查代码逻辑，使用调试工具来定位可能的问题所在。
相关·内容
在这里，当用户单击时，我试图将MUIDrawer的open属性设置为true，但是在设置state时，我得到了一个错误消息“意外的关键字'true‘” import React, { useState } from "react";
import { withRouter } from "react-router-dom";
import {
Drawer as MUIDrawer,
ListItem,
List,
ListItemIcon,
ListItemText,
AppBar,
Toolbar,
IconButt
浏览 12提问于2020-07-15得票数 2
我正在用react-navtive.创建一个安卓应用程序我使用Asyncstorage来验证登录名，info.Here是我的代码：
Login.js
const Login =()=>{
const history=useHistory();
const [state,setState] =useState({
username:'',
password:'',
});
const findUser=()=>{
const data=new FormData();
data.appen
浏览 4提问于2020-01-05得票数 0
我不打算在添加和编辑模式下使用相同的表单组件。我可以在编辑模式下填充表单组件上的值，但无法使用现有值在输入字段中键入内容。每当我们有id的时候，我就触发redux操作，这样他就可以获得单个联系人的详细信息，我正在从reducer提取联系人状态，并检查每个输入字段，如果它处于编辑模式，则显示我们有像contact.name，contact.email一样的from reducer。使用这种方法，我可以在每个输入字段中填充现有的值，但无法键入内容，您可以查看下面的代码吗?这种方法有什么问题？ const AddContact = () => {
const classes = useS
浏览 12提问于2021-07-17得票数 0
我通过存储一个状态布尔值并用每个输入的onChange事件更新它来实现这一点。每个输入都使用React.useState存储在会话变量中。验证工作确实有效，但是如果我输入一些内容，然后按backspace直到输入框为空，您可以单击submit按钮并发送一个空的数据，但我不知道如何防止这种情况发生，因为我正在检查每个输入框的每个onChange事件。
下面是我的一个输入
<input id="editCourse_placeHolder_courseName" type="text" placeholder={edit_Course?.name} onCha
浏览 0提问于2020-12-18得票数 1
试图使以下组件的onChange事件触发，但没有。当我键入seach框时，控制台上不会打印任何内容。不触发任何更改。
const Search = () => {
let history = useHistory()
const [search, setSearch] = useState('')
const handleSubmit = (e) => {
e.preventDefault()
if (search) {
console.log("typing..")
浏览 3提问于2022-01-17得票数 1
回答已采纳
2回答
我有一个基于选项卡的页面。每个选项卡都会带有标签，以便在单击时切换选项卡。我在该州的setValue中添加了useEffect。 PageManager文件： const RolePageManager = () => {
let location = useLocation()
let { uuid } = useParams()
const [tabIndex, setTabIndex] = useState(0)
useEffect(() => {
if (location.hash) {
switch (location.hash) {
case &
浏览 29提问于2020-08-06得票数 0
1回答
我的认证有一些问题，这是用axios创建的，前面的部分是React
后端运行在端口3005上，前端运行在端口3000上。在邮递员中，所有API都能很好地工作，但是当我试图将它集成到前端时，他给了我这个错误xhr.js:244 POST http://192.168.1.147/api/auth/login net::ERR_CONNECTION_REFUSED --这是我的auth控制器(登录端)
exports.login = async (req, res, next) => {
const { email, password } = req.body;
if(!e
浏览 1提问于2022-11-11得票数 0
我有一个关于react的奇怪的问题，我不确定是因为react钩子的setState，还是我以错误的方式构建导航。下面是我的代码： //App.tsx
function App() {
const { user, setUser, isLoading, setUserContext, setIsLoading } = GetUser();
if(isLoading)
return (
<div style={sp
浏览 41提问于2021-09-30得票数 0
因此，im使用api中接收的电话号码作为参数进行身份验证，从特定用户检索数据。现在，我只想处理api接收到一个不在api中的数字时的情况。为此，im使用material警报向用户显示，但当我输入错误号码时，我仍然会得到错误(无法读取属性“user”的未定义的属性)，而不是ui中的警报。以下是代码：
const Login = () => {
const history = useHistory()
const location = useLocation()
const [state, setState] = useState('')
c
浏览 2提问于2020-08-02得票数 0
回答已采纳
3回答
在这里，数组(布尔值)：
const [state, setState] = React.useState({
[`${"checkedA"+index}`]: false, //checkedA0
[`${"checkedB"+index}`]: false, //checkedB0
[`${"checkedC"+index}`]: false, //checkedC0
[`${"checkedD"+index}`]: false, //checkeD0
});
问题代码是：
c
浏览 2提问于2020-05-07得票数 0
我有两个组件，即'Navbar‘和'PostInputDailogueBox’，它们存在于App.js组件中。每当我单击导航栏中的按钮时，我都需要从' navbar ‘组件导航到组件。为此，使用了history.push()，但我无法导航到所需的组件。
以下是具体说明的相关组成部分：
App.js
import React,{Component} from 'react';
import './App.css';
import Navbar from './Components/Navbar/Navbar';
import
浏览 1提问于2020-10-03得票数 0
表单有多个输入，所以不是对每个输入都有一个setState函数，而是只有一个，它处理所有事件。我试着使用异步/等待，但我无法使它工作。
const [values, setValues] = useState({
username: undefined,
password: undefined,
confirmPassword: undefined,
});
//this should be synchronous
const onChange = (e) => {
setValues({...values, [e.target.name
浏览 15提问于2022-07-20得票数 1
回答已采纳
我是一名newbee on Fluent UI React组件。我正在尝试在命令栏上实现React Router，从流畅的UI react found here，它是带有溢出菜单项的commandbar。如果我想导航到包含菜单项的不同页面，我会使用history.push("/myLink")，就像解释的here一样。但为了让它正常工作，我需要访问功能组件中的useState。代码如下所示： export const CommandBarBasicExample: React.FunctionComponent = () => {
con
浏览 8提问于2020-11-05得票数 0
回答已采纳
我使用一个React来检测某个元素何时在视图中可见。在此之前，一切正常工作，但我需要‘重置’的状态时，一切都是隐藏的(如到达页脚或页眉)。
这是我的钩子：
import { useState, useEffect, useRef } from 'react'
const useIntersect = (ref) => {
const [isOnScreen, setIsOnScreen] = useState(false)
const observerRef = useRef(null)
useEffect(() => {
observerR
浏览 5提问于2021-12-23得票数 3
回答已采纳
2回答
我正在制作一个ReactJS项目，并且在登录页面中，我已经添加了这样的功能:当用户成功签名时，他会自动重定向到站点的主页。身份验证是通过Firebase进行的，下面是代码 auth.signInWithEmailAndPassword(email, password)
.then(() => {
console.log('Successfully signed in');
this.setState({
isLoading : false
});
浏览 9提问于2020-08-26得票数 0
我正在创建一个使用React登录页面。history.push("/")没有指示，控制台中的这个错误: Uncaught :无法读取未定义的属性(读取'push')。
这样做是从教程和严格遵循代码，但仍然无法弄清楚的几天。
import { useState } from "react";
import styles from "./register.css";
import Login from "../../containers/login/index";
function Register({ props,
浏览 1提问于2022-03-07得票数 0
回答已采纳
我有3个组件，我想使2个按钮主页和关于(点击后将重定向到相应的主页(路径'/')或关于(路径'/ ABOUT ') )。Component NOTFOUND仅在路径错误时显示。但是，当我尝试点击主页或关于它时，总是显示NOTFOUND，尽管url已经变成了'/‘或'/ ABOUT’。下面是详细的代码，我必须做什么才能让它正常工作。TKS全部
import React, { useState } from 'react';
import {Router, Route, Switch} from 'react-router-d
浏览 14提问于2021-06-11得票数 2
1回答
我已经构建了一个想要测试的react组件api。出于测试目的，该应用程序接口独立于react useState挂钩。因此，我的应用程序接口是从我创建的名为useAPI的自定义钩子中提供状态和setState的：
const useAPI = (api, initialState) => {
const [state, setState] = useState(initialState)
return api({ state, setState })
}
我的api的一个简短简化示例如下所示：
const anAPI = ({state, setState}) =>
浏览 14提问于2019-11-03得票数 0
回答已采纳
history.push和useState有什么问题吗？
我代码的相关部分
import { useParams, useLocation, useHistory } from 'react-router-dom'
const Component = () => {
const history = useHistory()
const { search } = useLocation()
const searchParams = new URLSearchParams(search);
const [name, setName] = use
浏览 8提问于2021-12-11得票数 0
回答已采纳
问题
在组件中调用history.push()似乎会导致整个remount卸载和重新挂载，从而导致没有意义的远程服务调用。
具体来说，我有一个远程服务调用，它在组件条目上触发。我不希望组件重新装入，也不希望服务调用重新运行(它很慢)。
无论发生什么，history.push(location.pathname + '?' + encodeURI(urlSearchParams.toString()));似乎都会导致卸载。我是不是用错了？是否有更好的方法来跟踪用户过滤器更改的历史，而不必担心无关的服务调用？
意图
我正在利用history.push()使浏览器历史记录随着查询参数
浏览 9提问于2020-07-15得票数 6
回答已采纳
我刚刚开始使用AsyncStorage。我尝试像这样存储输入文本值：
class Sample extends React.Component{
constructor(props){
super(props);
this.state = {
Name:' ',
};
}
componentDidMount() {
AsyncStorage.getItem("Name").then((value) =>{
this.setState({"Name":value})
浏览 4提问于2016-01-07得票数 21
我尝试使用钩子调用请求post。首先，一个使用this.setState的调用请求post可以正常工作，但是我想使用一个钩子(useState)而不是setState，它不能工作 下面的代码正常工作 export default class AddShoes extends Component {
constructor(props) {
super(props);
this.state = this.startValue;
this.state.show = false;
this.shoesChange = this.shoesChange.bind(
浏览 35提问于2021-10-21得票数 0
1回答
动态路由变得未定义
、、、
我使用的API接收一个电话号码作为参数，以从用户返回数据。因此，在UI中，我收到这个数字，并且通过console.log可以看到数据。但我也希望，当点击按钮时，用户会被带到一个只包含与他们相关的数据的链接，为此，我相信我必须将用户重定向到一个动态链接，例如：'/ user /john‘。我总是把undefined放在链接里，我不知道为什么。感觉状态本身并没有存储API数据
const Login =()=> {
const history = useHistory()
const location = useLocation()
const [state, setSt
浏览 3提问于2020-07-30得票数 1
回答已采纳
2回答
我已经使用了react-native- dropdown -picker来显示基于按钮点击的多个下拉列表。下拉列表显示为覆盖在另一个组件上，我无法选择项目。有人可以帮助解决这个问题吗？
示例代码：
import * as React from 'react';
import {View, Text, ScrollView, StyleSheet} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import {Button,
浏览 20提问于2021-05-18得票数 1
我有一个反应功能组件的问题。当react阿波罗查询“已完成”时，执行一个代码来处理令牌，当finish发送到另一个页面时(使用history.push)。
当运行代码时，我得到一个无限循环，其中包含以下消息：Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent inf
浏览 1提问于2019-05-27得票数 0
我无法使用history.push推送id，但是如果不添加id，它就能正常工作。我使用的是反应性路由器-dom v5
useEffect(() => {
fetchData();
if (!userInfo) {
history.push("/login"); // This portion works
} else if (successCreate) {
history.push(`/order/${order.id}`); // This does not work as expected
}
}, [userInfo, histor
浏览 7提问于2022-03-01得票数 0
通过使用上下文和firebase，我尝试使用onAuthStateChange在应用程序中设置用户。收到用户后，useEffect再次运行并返回null。
import React, { createContext, useState, useEffect } from 'react';
import { withFirebase } from '../Firebase';
// the context
const AuthUserContext = createContext();
// the higher order (wrapper)
const Pur
浏览 1提问于2019-07-29得票数 0
在我的父组件App.js中有一个Header和一个Footer。
我希望通过单击Header和Footer内部的按钮，在它们之间切换组件。
每次更改pageIndex时，我都希望替换为其他组件。
我得到了一个错误Cannot read property 'push' of undefined
为什么我会犯这个错误--和--这是一种干净而恰当的乳清(用我的defaultRouter()和useMemo) 。
function App() {
const [pageIndex, setPageIndex] = useState();
const [sear
浏览 1提问于2021-07-11得票数 0
我有一个使用classBased react的组件，它工作得很好，我决定切换到usestate，它停止工作。现在手工记录状态是随机的，但是它不能正常工作
我的手袋和useState
const [state, setState] = useState({
email: "",
password: "",
wrongCombo: false,
serverError: false
})
const handleChange = (evt) => {
const target = evt.target;
c
浏览 6提问于2020-07-24得票数 0
回答已采纳
1回答
我有一个名为episodes的对象数组，如下所示：
"episodes": [
{
"title": "XYZ",
"release_date": "2022-01-08",
"series": "Breaking Bad",
"img": "https://upload.wikimedia.org/wikipedia/en/0/03/Walter_White_S5B.png",
&#
浏览 4提问于2022-01-13得票数 1
1回答
我想使用react钩子将此react类组件更改为react函数组件。我知道如何使用useState来设置我的初始状态，但我需要在结构和语法方面得到帮助。我想使用不能在类组件中使用的history()。
我不确定如何正确地做这件事，希望得到一些帮助和指导。
到目前为止，我所做的是：
export function ProfileMenu(){
const history = useHistory()
const ref = useRef()
const [showUserMenu, setShowUserMenu] = useState(false)
const [showProfile, se
浏览 8提问于2020-03-11得票数 0
1回答
首先，我面临的问题是：
我用自制的和普通的JS一起工作了几个月，代码如下：
import { useState } from 'react';
const useForm = (initialValues) => {
const [state, setState] = useState(initialValues);
return [
state,
(e) => {
if (typeof e.target !== 'undefined') {
浏览 1提问于2021-01-25得票数 1
回答已采纳
当试图使用setState从useState钩子上传递<Link>时，我遇到了反应路由器的问题。我做错了什么？
我创建了一个简单的项目来展示问题：
打开控制台，单击链接查看错误。
const [state, setState] = useState(0);
return (
<div className="App">
<Link to={{ pathname: "/test", state: { state, setState } }}>test</Link>
<Sw
浏览 0提问于2019-06-05得票数 3
回答已采纳
我试图使用"useHistory“钩子从‘react路由器-dom’，我遇到了一个错误，'TypeError:无法读取属性的未定义(读取‘推送’)。下面是我的密码。
import './App.css';
import { React, useState } from 'react'
import Header from './Header';
import Register from './Register';
import Login from './Login';
import { Brows
浏览 1提问于2021-10-16得票数 1
1回答
为了简单起见，我只写了一小段代码，以便专注于问题。我有一个组件，它有一个对话框，这是一个商业流程的一部分，您可以填写一些信息，如注释，您可以批准或不批准销售。 import React, { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
const Modal = ({
closeModal,
open
}) => {
const [note, setNote] = useState('')
cons
浏览 16提问于2020-07-21得票数 0
我使用Axios和useEffect获取数据，并希望使用Chart.js显示它，但只显示图表框架，而不显示数据。
下面是我的代码
import React, { useState, useEffect } from "react";
import { Bar, Line } from "react-chartjs-2";
import axios from "axios";
function ChartSix() {
const [data, setData] = useState([]);
const [posts, setPo
浏览 5提问于2020-02-27得票数 0
我有一个以Rails API作为后端的react前端applictaion。当我试图注册或注册，或即使我点击任何菜单链接从应用程序，它重定向到点击的页面，一切顺利，没有任何问题。但是，如果我试图重新加载/刷新任何url，就会出现404错误。在开发服务器中，一切正常工作，但这个问题只出现在生产服务器上。
这是我的反应码。app.js
import React, { useState, useEffect } from "react";
import axios from "./Axios";
import { useHistory } from "reac
浏览 0提问于2021-07-05得票数 0
回答已采纳
我的代码如下:我正在学习ReactJS。试图改变鼠标悬停按钮的背景颜色。我知道css:悬停是最简单的方法。但是做这个实现是为了学习。
如果我使用if else条件检查悬停值，它可以正常工作。但是它给出了错误"TypeError“
当我试图在onMouseEnter和onMouseLeave事件处理程序函数中设置背景颜色时，无法分配对象‘#’的只读属性‘onMouseLeave’。
这里的只读属性是什么？我还没到康斯特。默认情况下是只读的吗？我怎么才能推翻它？
import React, { useState } from "react";
function App(
浏览 3提问于2022-08-28得票数 0
回答已采纳
在卸载异步clickHandler中的组件后调用clickHandler时，会在控制台中引发警告：
Warning: Can't perform a React state update on an unmounted component.
请参阅
function App() {
const [show, setShow] = useState(true)
return {show && <Button
text="Click to remove"
clickHandler={() => se
浏览 0提问于2019-06-26得票数 2
回答已采纳
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
1回答
我创建了一个应用程序，一切工作正常，但当我移动路由或重新加载页面，状态回到默认情况，也许我能够解决这个问题使用库作为react-persist或找到一些方法来把状态放在本地存储上，我不认为这种方法是最好的way.Maybe你另一种选择？ `store.js`
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducer/rootReducer";
const ini
浏览 15提问于2020-07-05得票数 0
1回答
我正在做一个项目，并创建一个网站。我现在正在处理的功能是用户的个人资料页面。我需要能够在页面上有一个编辑按钮，将允许用户编辑他们的姓名，用户名，电子邮件和更新密码。以下是我拥有的代码，但我不确定如何让一切都正常工作。 import React, {useEffect, useState} from "react";
import {useHistory} from "react-router-dom";
import axios from "axios";
const ProfilePage = () => {
const [u
浏览 12提问于2020-11-30得票数 0
回答已采纳
1回答
我使用antd (3.26.7版)选项卡，并为每个选项卡建立react路由器-散列链接，以便用户能够使用锚和共享复制url (复制的url打开所需的锚)。
问题是，我需要在选项卡上单击两次以更改活动选项卡。我的建议是，这可能是因为我在选项卡中使用的<link>。但是没有<link>，我就不能创建工作锚。
这是我的代码：
import React, { Component } from "react";
import { Tabs } from "antd";
import "./styles.scss";
import {
浏览 4提问于2020-06-09得票数 1
回答已采纳
我有父组件，显示在表中的记录。当用户单击它时，重定向到具有记录Id的子组件，并使用历史推送传入参数。这一切都很好，但是除了我无法实现的参数之外，我还需要传递一个数据对象，以及我需要在子组件中执行哪些步骤来读取该对象？ 对象定义 export interface ISearchCriteriaForm{
startTime: string,
endTime: string,
liveTime?: string,
schedAction_Active: string,
siteId?: number,
scheduleId?: number
} 父组件 const MyC
浏览 36提问于2021-01-03得票数 1
回答已采纳
4回答
我在玩React重写一个表单来使用钩子概念。一切正常工作，除了我在输入中输入任何一个字符后，输入就失去焦点。
我想存在一个问题，就是组件的外部不知道组件中的内部更改，但是如何解决这个问题呢？
这是useForm钩子：
import React, { useState } from "react";
export default function useForm(defaultState, label) {
const [state, setState] = useState(defaultState);
const FormComponent = () =>
浏览 2提问于2020-01-13得票数 35
回答已采纳
我正在尝试创建与以下PrivateRoute类组件等效的功能组件(源代码)：
import React, { useState, useEffect } from "react";
import { Route, Redirect, withRouter, useHistory } from "react-router-dom";
import { Auth } from "aws-amplify";
class PrivateRoute extends React.Component {
state = {
loaded: fal
浏览 4提问于2020-03-28得票数 1
回答已采纳
我正在处理一个useState示例，我发现它在第二次呈现之前无法工作。第一次在它周围保存默认值0。
import React, { useState } from "react";
const MyState = () => {
const [age, setage] = useState(0);
function handleClick() {
var enteredAge = document.getElementById("txtAge").value;
if (enteredAge) {
setage(ent
浏览 4提问于2022-04-30得票数 0
回答已采纳
在我的render中，我触发了一个函数来将用户重定向到不同的页面，但是我得到了一个错误的Cannot update during an existing state transition (such as within render)。 我注意到，如果我将redirectToPath函数(在render中)放在setTimeout中，它允许状态完成转换，错误也就消失了。如果我将history.push(path)和setState (在redirectToPath中)放在一个setTimeout中，它也可以工作。我如何重构它，使我不会与状态转换发生冲突？ componentDidMount(
浏览 27提问于2019-12-18得票数 3
我正在尝试限制用户换行符的数量，或者只是简单地限制用户可以在React Native中输入的总行数。有没有人有解决这个问题的办法，而不会有任何闪烁或光标来回跳动？任何帮助或提示都是很棒的。 基本上，我想让它工作的'maxLength‘如何工作的字符数量。 下面的代码将使光标向前跳转。我也尝试过preventingDefault onKeyPress=='Enter'，它仍然会导致光标跳动。 handleTextChange(text) {
let breaks = text.split(/\r\n|\r|\n/).length
if (breaks
浏览 56提问于2020-09-25得票数 0
作为练习，我正在尝试构建一个简单的新闻应用程序。我对所有数据都使用NewsApi。
我正在点击他们的“搜索”端点，当我点击链接时，一切都正常，但当我点击enter时，我得到“警告:失败的属性类型:属性类型在Link中被标记为required，但它的值是undefined。”不管最后一个搜索主题是什么，它都会命中端点。也就是说，搜索扬基队并点击链接，它是有效的，但然后我键入道奇队，并按回车键，它会进入"/yankees?“
import React, { useState } from "react";
import { Link, useHistory } from &
浏览 0提问于2021-01-30得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
