React常见问题

基础环境

操作系统 Ubuntu18.04

React问题

React 作为目前流行的三大Web前端开发框架之一，值得大家学习。本文主要记录在开发过程中遇到的各类问题。

在浏览器访问网页时时，提示“Something went wrong.”

react引用可视化组件recharts/ResponsiveContainer，报错Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.Check your code at Index.js:163. …

现象：Chrome浏览器访问时，提示Someting went wrong.
分析步骤：

1. F12打开开发者工具，在Console中，显示如上信息
2. 阅读自己编写的Index.js代码 <ResponsiveContainer.....//Line 163，发现问题是ResponsiveContainer组件，再观察引入recharts工具包的Component，包含以下方式：

import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";
import ResponsiveContainer from "recharts/lib/component/ResponsiveContainer";

鼠标放在recharts，“转到定义F12”，发现node_modules/recharts/types/index.d.ts文件，包含ResponsiveContainer的相关export代码：

export { ResponsiveContainer } from './component/ResponsiveContainer';
export type { Props as ResponsiveContainerProps } from './component/ResponsiveContainer';

export { Line } from './cartesian/Line';
export type { Props as LineProps } from './cartesian/Line';

修改ResponsiveContainer组件的引入方式：

import { ResponsiveContainer,CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";

3. 进一步分析，此类问题产生原因：组件引入方式错误

控制台显示：Manifest: Line: 1, column: 1, Syntax error.错误

1. 原因：react-app创建项目时，同事删除manifest.json文件。但index.html文件中包含manifest.json的引用。
2. 措施：删除index.html文件中的<link rel="manifest" href="/manifest.json" />

控制台显示：mapStateToProps() in connect() must return a plain object, Instead received Undefined

1. 分析问题：typescript const mapStateToProps = () => { }函数无返回结果
2. 对策：修改以上代码，返回空结构体：typescript const mapStateToProps = () => ({ })或者const mapStateToProps = () => { return {} }

控制台显示：Warning: React does not recognize the tooltipTitle prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase tooltiptitle instead. If you accidentally passed it from a parent component, remove it from the DOM element.

控制台显示：Warning: Failed prop type: Invalid prop className of type array supplied to ForwardRef(SvgIcon), expected string.

1. 分析问题：<VideoIcon className={[classes.iconFix]} />
2. 删除[ ]代码变为<VideoIcon className={classes.iconFix} />

控制台提示：Warning: Failed prop type: Invalid prop autoComplete of type boolean supplied to ForwardRef(Input), expected string.

1. 分析问题，控制台打印上述Warning，同时提示以下的调用堆栈。

 in ForwardRef(Input) (created by WithStyles(ForwardRef(Input)))
 in WithStyles(ForwardRef(Input)) (at LoginForm.js:294)
 ......

查阅代码LoginForm.js，确实存在<Input/>的autoComplete
2.解决问题：删除<Input/>的autoComplete属性
3.下一步：深入了解<Input/>的使用

控制台显示：Warning: Failed prop type: The prop justify of ForwardRef(Grid) is deprecated. Use justifyContent instead, the prop was renamed.

1. 分析问题，控制台继续打印调用堆栈：

in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at Nav.js:76)
......

控制台显示Warning: Encountered two children with the same key, /#/home?path=%2F. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

1. 分析问题，控制台继续打印调用堆栈：

 in div (created by ForwardRef(Grid))
 in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
 in WithStyles(ForwardRef(Grid)) (at Nav.js:76)

控制台显示 Warning: validateDOMNesting(…):

cannot appear as a descendant of

.

1. 分析问题，控制台继续打印调用堆栈：

in div (at FileList.js:219)

查看源码<ListItemText secondary={<div> </div>}/>;
2.处理方法：修改<div>为<span>
3.下一步搞清楚<div>不能使用的原因

网页无法正常打开，显示：redux TypeError: Cannot read property ‘apply‘ of undefined

1. 分析问题（分析原因）：在react的Web项目中，redux提供状态管理，开启调试模式；如果浏览器没有未安装react和redux相关的扩展程序，则会报以上的错误。
2. 提出对策：
   情况1：在开发环节，安装浏览器的相关扩展程序（ React Developer Tools）、（Redux DevTools）；
   情况2：在发布环节，注释源码中相关调试代码，或者修改相关代码

// 文件名：index.js
// 注释代码
// window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

//修改代码
window.__REDUX_DEVTOOLS_EXTENSION__    ?  window.__REDUX_DEVTOOLS_EXTENSION__()  :  (a) => a

Redux TypeError: Cannot read property ‘apply’ of undefined

yarn start Error: ENOSPC: System limit for number of file watchers reached

1.分析问题（分析原因）：
2.提出对策

#Step 1 ：打开编辑文件
sudo vim /etc/sysctl.conf

#Step2：在文件最后一行添加下面这句，并保存
fs.inotify.max_user_watches=524288

#Step3：执行
sudo sysctl -p