react常见问题

import

Import in body of module; reorder to top import/first

1. import 放在最上面，const 上面
2. import 语句应该放在最前面，至少要放到const定义变量的前面

1. 删除<React.StrictMode>标签
   1. findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of CSS
2. 只能有一个根元素
   1. React.Children.only expected to receive a single React element child
3. this.handleAdd.bind(this)，this.handleAdd 方法没找到
   1. TypeError: Cannot read property 'bind' of undefined

Expected onClick listener to be a function, instead got a value of string type

事件 onClick没有花括号

// 错误的语法
<button onClick="openSmallDesktopAboutusForm()">点击</button>
// 正确的语法
<button onClick={this.handleAdd}>点击</button>

TypeError: Cannot read property ‘bind’ of undefined

// this.handleAdd 方法没找到
    this.handleAdd.bind(this)

“export ‘__RouterContext’ was not found in ‘react-router’

react-router-dom 4.3.1 报错

1. 是”: “4.3.1”依赖的问题，将去掉，不然会安装4.3.4版本
2. 删除 package-lock.json，npm i react-router-dom
3. Cannot read property ‘Consumer’ of undefined

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './react-router-dom/mapRoute/index'
const root = document.getElementById('root')
// 报错 Component instead of <Component /> from render.
ReactDOM.render(App, root)
// 正确的写法
ReactDOM.render(<App />, root)

Remove untracked files, stash or commit any changes, and try again.

1. git地址有问题，解决方法
2. 先 git add .
3. git commit -m “init README.md”
4. yarn eject
5. 最快的方法：直接删除 git文件夹；用到 git时，再 git init创建 git
   1. index.js:2177 Warning: [antd: LocaleProvider] LocaleProvider is deprecated. Please use locale with ConfigProvider instead: http://u.ant.design/locale

1. Missing locale data for locale: “undefined”. Using default locale: “en” as fallback.
2. [antd: Menu] inlineCollapsed not control Menu under Sider. Should set collapsed on Sider instead.
3. index.js:2177 Warning: [antd: Switch] value is not validate prop, do you mean checked?

key报错

1. index.js:2177 Warning: Each child in a list should have a unique “key” prop.
2. Check the render method of SiderMenu. See https://fb.me/react-warning-keys for more information.in MenuItem (created by SideMenu)

history报错

Warning: Please use require("history").createHashHistory instead of require("history/createHashHistory"). Support for the latter will be removed in the next major release.

1. 找到node_modules中的dva包 node_modules/dva/lib/index.js
2. 修改 21行的 history引入方式
3. 重启 npm start
4. 缺点：npm 重新 安装还有警告

// var _createHashHistory = _interopRequireDefault(require("history/createHashHistory"));
var _createHashHistory = _interopRequireDefault(require("history").createHashHistory);

1. 还要警告的话，修改 /src/index.js

const createBrowserHistory = require('history').createBrowserHistory
const app = dva({
    history: createBrowserHistory()
})

state报错

use callback in setState when referencing the previous state（react/no-access-state-in-setState）
this.setState({
visible: !this.state.visible,
});

使用前一个状态（prevState）作为第一个参数的回调，可以避免这种情况

this.setState(prev => ({ visible: !prev.visible }))

useEffect

useEffect changed size between renders.

index.js:2177 Warning: The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant
Previous: [[object Object], [object Object], [object Object]]
value是个数组对象，如果展开数组对象，就报错

function App(props) {
  const {value = [], onChange, form} = props
  useEffect(() => {
    const formData = form.getFieldValue('rule')
    if(!isEqual(value, formData)) {
      setFieldsValue({rule: value})
    }
  }, [...value]) // 报错，不要用展开运算符，直接写数组
}

生命周期警告

1. dva-cli创建的项目会有这个警告
2. componentWillMount has been renamed, and is not recommended for use.
3. 删除 package.json文件，重新 npm安装 react & react-router-dom
4. 修改项目中package.json文件中
5. 如果发现还是报warning，就删除package-lock.json文件，删除node_modules文件夹，重新 npm install

// dva-cli 默认安装的
"dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
}
// 重新安装
npm i react react-dom dva
// 更新后的 package.json
"dependencies": {
    "antd": "^4.3.4",
    "babel-plugin-import": "^1.13.0",
    "dva": "^2.4.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
}

不能在组件销毁后设置state

Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix

1. 不能在组件销毁后设置state，防止出现内存泄漏的情况
   
2. 组件都被销毁了，设置 state会报错，解决：
   
3. 生命周期钩子函数：componentWillUnmount，将报错的地方移入此钩子里进行处理
   

   componentWillUnmount(){
    //处理逻辑
   }

‘React’ must be in scope when using JSX react/react-in-jsx-scope

1. 因为没有引入React的原因，在最顶端加上
   
2. 小写 react 也会报这个错误，改成 React
   
3. import React from 'react'
   

ESLint: Unary operator ‘++’ used. (no-plusplus)，原因ESLint没有++操作符

1. 不要在代码中，++， —，用 +=，或 state = state + 1
   
2. 修改为 +=，或 + 1
   

   for (let i = 0; i < arr.length; i += 1) {
    let item = arr[i].uid
   }
   state.count ++; 改成 state.count += 1;

ESLint: Missing radix parameter. (radix)，进制错误

parseInt(this.state.adminId，10)
// 或
Number(this.state.adminId)

table

Each child in a list should have a unique “key” prop. See https://fb.me/react-warning-keys for more information.

1. 基本都是在循环生成多个组件的时候，没有给组件加上key引起的
2. 因为dom进行diff对比 没有key值，所以报错警告
3. 循环生成多个组件中，必须要加上key值（唯一值）
4. 如果数据没有 key属性，就使用 rowKey，来指定数据列的主键
5. React中有两个比较特殊的参数：ref 和 key，不会被传递到组件

<Table
  rowKey={ (el, i) => i }
    rowKey={(record, index) => index} />

modal

1. Modal默认挂载节点为document.body
2. 指定挂载元素

getContainer={()=> document.getElementsByClassName('fatherClassName')[0]}

Form

Form不能嵌套 Form

Warning: validateDOMNesting(…):

<Form.Item>
  {getFieldDecorator('list', {
    initialValue: fromData.list
  })(
    <RuleIndex />
  )}
</Form.Item>

"react": "17.0.1",
"react-dom": "17.0.1",