无缺的博客

场景：数据存储在了localStorage里，localStorage变化实时更新组件里使用到的数据误区：一开始条件下想到的是按照useEffect监听useState变化那一套 useEffect(()=>{ useData(localStorage.getItem('rightCartData')) },[localStorage.getItem('rightCartData')])很明显不行，为什么？示例不起作用的原因是和传递给 useEff

控制台报错：Cannot read properties of null (reading 'value')不多说，解决方法如下import {useCallback} from 'react';import debounce from 'lodash/debounce';import axios from 'axios';function Input() { const [value, setValue] = useState(''); const debounceF.

介绍：material-design-icons 是由 Google 开源的 Material 设计图标集1.安装：npm install material-design-icons2.在你的入口sass或者less里引入material-icons.css@import '~material-design-icons/iconfont/material-icons.css';body:{...}3.直接使用：<span className="material-icons"

React的一大优点是可以编写可复用的组件，我们可以使用它来构建复杂的UI界面。NPM允许我们编写可复用模块并将其发布到网上，这样来自世界各地的数百万开发可以下载并且使用1.创建我们的文件夹myComponents2.在myComponents目录下 初始化package.json文件npm init3.安装babel和Presets，将React JSX或者JavaScript代码转为ES5@babel/preset-env可将我们编写的代码转化成ES5，@babel/preset

场景：每次打开Modal 重新请求ajax数据，或者初始化Form等数据解决办法：给Modal添加key，每次弹出的时候 改变key的值，保证每次key的值不同 这里使用了Math.random()介绍代码如下：handleOk = () => { this.setState({myKey: Math.random()});}const {visible,myKe...

参考：https://www.jianshu.com/p/fb201f82cf8c安装 react-router-domnpm install react-router-dom一.基本使用App.jsimport React from 'react'import { BrowserRouter as Router, Route, Link, Switch } from '...

1.react-redux一般和redux一起使用，首先 安装redux 和 react-reduxnpm install redux or yarn add reduxnpm install reac-redux or yarn add reac-redux2.在根组件 引入Provider、index.jsimport React from 'react';impo...

问题？什么是中间件，是谁和谁之间的中间件呢？说这个问题之前，先搞清楚redux的流程（顺序如下）： View：派发一个action，action通过store的dispatch方法派发给store store：store接收到action连同之前的state一起传给reducer reducer：reducer返...

//执行一下代码npx create-react-app my-appcd my-appnpm start生成以下目录结构，今天就来介绍下 这些文件都是做什么的，按照顺序，从上往下开始根目录下：yarn.lock 项目依赖的安装包、会在这里进行限制、（我们不要动它）README.md 项目的说明文件、这里文件你可以自己删除掉，通过markdow的语法来编写自...

场景：判断数组是否有数据，以此来绝对要不要执行后面的语句有一些“falsy” 值，如数字0，仍然会被 React 渲染。例如，以下代码并不会像你预期那样工作，因为当props.messages是空数组时，0仍然会被渲染<div> //错误 {props.messages.length && <MessageList messages...

一般组件之间传参通过props，今天记录一下Context使用场景：组件嵌套层级很深的情况1.在传参的那一层（父组件）顶部创建一个 Context 对象const Context = React.createContext(defaultValue); //创建一个 Context 对象 //defau...

诱发这个情况的原因是，我在componentDidMount 里面执行的ajax请求componentDidMount() { getClassNameList() .then(res => { if (res.code == 200) { this.setState({ classID: res.data...

选中Select下拉option之后，不仅仅要获取它的value，还要获取其它字段type，首先把type字段传递给option，之后通过onChange={(value,option)=> this.handleChange(option)}option可以获取到很多参数，里面的props就是你需要的数据 //事件handleChange = (option)...

import {TextareaItem, InputItem, Button, Flex, SearchBar} from 'antd-mobile';class leavMessage extends Component {constructor(props){ super(props); Util.setTitle("关于我们"); this.stat...