react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reacttraining.com/react-router/web/api/Link/replace-bool

由于版本问题,React中history不可用 import { hashHistory } from 'react-router' 首先应该导入react-router-dom包: import { hashHistory } from 'react-router-dom' 以前的写法: import React from 'react'; import { hashHistorty } from "react-router"; class Login extends React.C

代码如下: class test extends Component { constructor(props) { super(props); this.state = { liked: false }; } handleClick(event) { this.setState({liked: !this.state.liked}); } render() { var text = this.state.liked ? '喜欢' : '不喜欢'; return ( <div onClick={t

正文从这开始~ .tsx扩展名 为了在React TypeScript中解决Cannot find name报错,我们需要在使用JSX文件时使用.tsx扩展名,在你的tsconfig.json文件中把jsx设置为react-jsx ,并确保为你的应用程序安装所有必要的@types包. 下面是在名为App.ts的文件中发生错误的示例. export default function App() { // ️ Cannot find name 'div'.ts(2304) return ( <div

正文从这开始~ 总览 在React中,为了解决"Cannot find namespace context"错误,在你使用JSX的文件中使用.tsx扩展名,在你的tsconfig.json文件中把jsx设置为react-jsx,并确保为你的应用程序安装所有必要的@types包. 这里有个例子来展示错误是如何发生的. // App.ts import React from 'react'; interface UserCtx { first: string; last: string;

正文从这开始~ 总览 当我们为元素的onClick属性传递一个值,但是该值却不是函数时,会产生"Expected onClick listener to be a function"报错.为了解决该报错,请确保只为元素的onClick属性传递函数. 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ Warning: Expected `onClick` listener to be a function // instea

今天在开发时报了以下错误,记录一下 我们不能在组件销毁后设置state,防止出现内存泄漏的情况 出现原因直接告诉你了,组件都被销毁了,还设置个锤子的state啊 解决方案: 利用生命周期钩子函数:componentWillUnmount 将报错的地方移入此钩子里进行处理 componentWillUnmount(){//处理逻辑 }

当报错这个的时候就要看函数是否在行内绑定this,或者在constructor中绑定this. 我这里犯的错误的是虽然我在constructor中绑定了this,但是语法写的不正确. 错误示范: constructor(props){ super(props); this.state = { keyword:this.props.match.params.id, result:"true", _isMounted:true }; this.handleFetch.bind(this)

正文从这开始~ 总览 当我们尝试在react router的Router上下文外部使用useNavigate 钩子时,会产生"useNavigate() may be used only in the context of a Router component"警告.为了解决该问题,只在Router上下文中使用useNavigate 钩子. 下面是一个在index.js文件中将React应用包裹到Router中的例子. // index.js import {createRoot} f

举例:myblog.com/ 刷新没问题 myblog.com/add 刷新404 browserHistory报404,hashHistory却正常 原因是少路由.web.php添加路由 Route::get('/add', function () { return view('welcome'); });

正文从这开始~ 总览 组件不能作为JSX组件使用,出现该错误有多个原因: 返回JSX元素数组,而不是单个元素. 从组件中返回JSX元素或者null以外的任何值. 使用过时的React类型声明. 返回单个JSX元素 下面是一个错误如何发生的示例. // App.tsx // ️ 'App' cannot be used as a JSX component. // Its return type 'Element[]' is not a valid JSX element. // Type 'El

正文从这开始~ 类型守卫 使用类型守卫来解决React中useRef钩子"Object is possibly null"的错误.比如说,if (inputRef.current) {} .一旦null被排除在ref的类型之外,我们就能够访问ref上的属性. 下面是一个错误如何发生的示例. import {useEffect, useRef} from 'react'; export default function App() { const inputRef = useRef<

正文从这开始~ 总览 在React中,当我们试图访问类型为HTMLElement 的元素上不存在的属性时,就会发生Property 'X' does not exist on type 'HTMLElement'错误.为了解决该错误,在访问属性之前,使用类型断言来正确地类型声明元素. 这里有三个例子来展示错误是如何发生的. // App.tsx import {useEffect} from 'react'; export default function App() { useEffect((

正文从这开始~ 总览 为了解决"Warning: Can't perform a React state update on an unmounted component" ,可以在你的useEffect钩子中声明一个isMounted布尔值,用来跟踪组件是否被安装.一个组件的状态只有在该组件被挂载时才会被更新. import {useState, useEffect} from 'react'; const App = () => { const [state, setStat

正文从这开始~ 总览 当我们尝试在JSX代码中,直接渲染对象或者数组时,会产生"Objects are not valid as a React child"错误.为了解决该错误,在JSX代码中,使用map()方法来渲染数组或者访问对象的属性. 下面是错误如何发生的示例. export default function App() { const employees = [ {id: 1, name: 'Alice', country: 'Austria'}, {id: 2, name

正文从这开始~ 总览 当我们把一个input的初始值设置为null或者覆盖初始值设置为null时,会产生"valueprop on input should not be null"警告.比如说,初始值来自于空的API响应.可以使用一个回退值来解决这个问题. 这里有个例子来展示错误是如何发生的. export default function App() { // ️ Warning: `value` prop on `input` should not be null. // Con

正文从这开始~ 总览 当input的值被初始化为undefined,但后来又变更为一个不同的值时,会产生"A component is changing an uncontrolled input to be controlled"警告.为了解决该问题,将input的值初始化为空字符串.比如说,value={message || ''} . 这里有个例子来展示错误是如何发生的. import {useState} from 'react'; const App = () => {

正文从这开始~ 总览 在React中,当我们为元素的style 属性传递字符串时,会产生"Style prop value must be an object"警告.为了解决该警告,使用从属性到值的映射.比如说,style={{paddingLeft: '15px'}} . 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ Style prop value must be an object eslint(react/st

正文从这开始~ 总览 当我们用一个null值初始化一个ref,但在其类型中不包括null时,就会发生"Cannot assign to 'current' because it is a read-only property"错误.为了解决该错误,请在ref的类型中包含null.比如说,const ref = useRef<string | null>(null) . 这里有个例子来展示错误是如何发生的. // App.tsx import {useEffect, useR

正文从这开始~ 总览 当我们从map()方法返回的两个或两个以上的元素具有相同的key属性时,会产生"Encountered two children with the same key"错误.为了解决该错误,为每个元素的key属性提供独一无二的值,或者使用索引参数. 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ name property is not a unique identifier const people