lottie-react-web 报错: Uncaught TypeError: Cannot read properties of undefined (reading 'forEach') 作者: Chuwen 时间: 2022-10-29 分类: React 评论 ## 错误信息 ``` Uncaught TypeError: Cannot read properties of undefined (reading 'forEach') at Lottie2.deRegisterEvents (index.js:226:22) at Lottie2.componentWillUnmount (index.js:148:12) at callComponentWillUnmountWithTimer (react-dom.development.js:20413:14) at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16) at invokeGuardedCallback (react-dom.development.js:4056:31) at safelyCallComponentWillUnmount (react-dom.development.js:20420:5) at commitUnmount (react-dom.development.js:20951:11) at commitNestedUnmounts (react-dom.development.js:21004:5) at unmountHostComponents (react-dom.development.js:21290:7) ```  ## 问题原因 查看报错信息，似乎指的是 `eventListeners` 变量不是一个数组或不存在  ## 解决方案 加上这个属性并给一个空数组即可 `eventListeners` ```react <Lottie options={{ animationData: animation }} width={220} eventListeners={[]}/> ``` 
React / Vue.js 等 + PHPStorm (WebStorm) 进行断点调试 作者: Chuwen 时间: 2022-02-11 分类: React 评论 ## 第 1 步，启动项目 启动项目的方式有很多种，你可以使用终端方式启动，还可以使用 IDE 自带的 **运行/配置 调试配置** 第 1 种方式，终端方式启动：  第 2 种方式，运行/配置 调试配置启动：  ## 配置“运行/配置 调试配置”  ## 将第 1 步的项目访问地址填进去  打断点、启动：  调试： 
React + MobX (mobx-utils) 实现深度监听值变化 作者: Chuwen 时间: 2022-02-10 分类: React 评论 相关链接： - https://github.com/mobxjs/mobx/issues/214#issuecomment-430218360 - https://github.com/mobxjs/mobx-utils#deepobserve ## 安装 mobx-utils mobx-utils GitHub 项目地址: https://github.com/mobxjs/mobx-utils `yarn add mobx-utils` 或者 `npm install --save mobx-utils` ## 使用 mobx-utils 此代码仅仅是示例代码 > ⚠️ 注意，根据自己的业务逻辑，如页面切换后调用 `disposer()` 去注销监听，否则**重复注册**深度监听会造成内存泄漏！ SettingsStore.ts: ```ts import {action, makeObservable, observable} from "mobx"; export interface ISettingsStore{ show: boolean; } export default class SettingsStore implements ISettingsStore { @observable public show: boolean = false; constructor() { makeObservable(this) } } ``` SettingsPage.tsx: ```ts const settingsStore = new SettingsStore() const disposer = deepObserve(settingsStore, (change, path) => { console.log(change) }) // 请注意，根据自己的业务逻辑，如页面切换后调用 disposer() 去注销监听，否则重复注册深度监听会造成内存泄漏！ // disposer() ``` --- ## 个人项目实践 1. 将**注册监听器**和**销毁监听器**放到一个文件导出来 2. 在需要用的页面(A 页面)，初始化完成后(如从 API 成功获取数据)，执行**注册监听器** 3. 在路由上监听，离开 A 页面事件，执行**销毁监听器**
React 将 svg 转换为 React 组件 作者: Chuwen 时间: 2022-02-07 分类: 其他分类 评论 SVGR：https://react-svgr.com/docs/cli/ ## 转换 将当前路径下的 `svg` 文件转换为 `tsx` 并以驼峰命名法明明 ```shell npx @svgr/cli --out-dir . --ext tsx -- * ``` 更多命令请看项目文档 ## 使用 直接导入就可以使用了
MboX + ReactECharts 不更新数据 作者: Chuwen 时间: 2022-01-12 分类: React 评论 tsx 如下： ``` <ReactECharts option={this.props.shipmentsLookupsChartStore?.getOptions}/> ``` store 如下: > 如果按照以下 `setOptionsData` 就会出现问题，数据已经给了，但是视图不会更新 ```ts import {action, computed, makeObservable, observable} from "mobx"; export default class ChartStore implements IChart { @observable public options = ChartOption; constructor() { makeObservable(this) } @computed get getOptions(): any { return this.options } @action.bound setOptionsData(data: ChartOptionsData): void { // 设置 x 轴数据 if (this.options?.xAxis[0]?.data) { this.options.xAxis[0].data = data.xAxisData; } } } ``` ### 解决办法 > 原因是深浅克隆的原因，仅作为记录，不保证我说的一定是正确的 首先安装 `lodash`，`setOptionsData` 方法改为如下，就可以正常运行了： ```ts @action.bound setOptionsData(data: ChartOptionsData): void { //深度克隆数据 const newOption = cloneDeep(this.options) // 设置 x 轴数据 if (this.options?.xAxis[0]?.data) { newOption.xAxis[0].data = data.xAxisData } this.options = newOption } ```