Lottie react web error: Uncaught TypeError: Cannot read properties of undefined (reading 'forEach') Author: Chuwen Time: 2022-10-29 Classification: React comment <trans data-src="## 错误信息">##Error message</trans> <trans data-src="```">```</trans> <trans data-src="Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')">Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')</trans> <trans data-src="at Lottie2.deRegisterEvents (index.js:226:22)">at Lottie2.deRegisterEvents (index.js:226:22)</trans> <trans data-src="at Lottie2.componentWillUnmount (index.js:148:12)">at Lottie2.componentWillUnmount (index.js:148:12)</trans> <trans data-src="at callComponentWillUnmountWithTimer (react-dom.development.js:20413:14)">at callComponentWillUnmountWithTimer (react-dom.development.js:20413:14)</trans> <trans data-src="at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)">at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)</trans> <trans data-src="at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)">at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)</trans> <trans data-src="at invokeGuardedCallback (react-dom.development.js:4056:31)">at invokeGuardedCallback (react-dom.development.js:4056:31)</trans> <trans data-src="at safelyCallComponentWillUnmount (react-dom.development.js:20420:5)">at safelyCallComponentWillUnmount (react-dom.development.js:20420:5)</trans> <trans data-src="at commitUnmount (react-dom.development.js:20951:11)">at commitUnmount (react-dom.development.js:20951:11)</trans> <trans data-src="at commitNestedUnmounts (react-dom.development.js:21004:5)">at commitNestedUnmounts (react-dom.development.js:21004:5)</trans> <trans data-src="at unmountHostComponents (react-dom.development.js:21290:7)">at unmountHostComponents (react-dom.development.js:21290:7)</trans> <trans data-src="```">```</trans> <trans data-src="!">!</trans> <trans data-src="[](">[](</trans> <trans data-src="https://cdn.nowtime.cc/2022/10/29/580616896.png">https://cdn.nowtime.cc/2022/10/29/580616896.png</trans> <trans data-src=")">)</trans> <trans data-src="## 问题原因">##Causes</trans> <trans data-src="查看报错信息，似乎指的是 `eventListeners` 变量不是一个数组或不存在">View the error message. It seems that the 'eventListeners' variable is not an array or does not exist</trans> <trans data-src="!">!</trans> <trans data-src="[](">[](</trans> <trans data-src="https://cdn.nowtime.cc/2022/10/29/92600442.png">https://cdn.nowtime.cc/2022/10/29/92600442.png</trans> <trans data-src=")">)</trans> <trans data-src="## 解决方案">##Solution</trans> <trans data-src="加上这个属性并给一个空数组即可 `eventListeners`">Add this attribute and give an empty array to ` eventListeners`</trans> <trans data-src="```react">```react</trans> <trans data-src="<Lottie options={{ animationData: animation }} width={220} eventListeners={[]}/>"><Lottie options={{ animationData: animation }} width={220} eventListeners={[]}/></trans> <trans data-src="```">```</trans> <trans data-src="!">!</trans> <trans data-src="[](">[](</trans> <trans data-src="https://cdn.nowtime.cc/2022/10/29/1407110091.png">https://cdn.nowtime.cc/2022/10/29/1407110091.png</trans> <trans data-src=")">)</trans>
React/Vue.js, etc.+PHP Storm (WebStorm) for breakpoint debugging Author: Chuwen Time: 2022-02-11 Classification: React comment <trans data-src="## 第 1 步，启动项目">##Step 1: Start the project</trans> <trans data-src="启动项目的方式有很多种，你可以使用终端方式启动，还可以使用 IDE 自带的 **运行/配置 调试配置**">There are many ways to start a project. You can use the terminal mode to start, or you can use the * * run/configure debugging configuration provided with the IDE**</trans> <trans data-src="第 1 种方式，终端方式启动：">The first mode is terminal mode startup:</trans> <trans data-src="!">!</trans> <trans data-src="[yarn run dev](">[yarn run dev](</trans> <trans data-src="https://cdn.nowtime.cc/2022/02/11/4228051095.png">https://cdn.nowtime.cc/2022/02/11/4228051095.png</trans> <trans data-src=")">)</trans> <trans data-src="第 2 种方式，运行/配置 调试配置启动：">The second way is to run/configure debugging configuration startup:</trans> <trans data-src="!">!</trans> <trans data-src="[](">[](</trans> <trans data-src="https://cdn.nowtime.cc/2022/02/11/572089405.png">https://cdn.nowtime.cc/2022/02/11/572089405.png</trans> <trans data-src=")">)</trans> <trans data-src="## 配置“运行/配置 调试配置”">##Configure Run/Configure Debug Configuration</trans> <trans data-src="!">!</trans> <trans data-src="[](">[](</trans> <trans data-src="https://cdn.nowtime.cc/2022/02/11/872322467.png">https://cdn.nowtime.cc/2022/02/11/872322467.png</trans> <trans data-src=")">)</trans> <trans data-src="## 将第 1 步的项目访问地址填进去">##Fill in the project access address in Step 1</trans> <trans data-src="!">!</trans> <trans data-src="[](">[](</trans> <trans data-src="https://cdn.nowtime.cc/2022/02/11/570218.png">https://cdn.nowtime.cc/2022/02/11/570218.png</trans> <trans data-src=")">)</trans> <trans data-src="打断点、启动：">Break point, start:</trans> <trans data-src="!">!</trans> <trans data-src="[](">[](</trans> <trans data-src="https://cdn.nowtime.cc/2022/02/11/2368660618.png">https://cdn.nowtime.cc/2022/02/11/2368660618.png</trans> <trans data-src=")">)</trans> <trans data-src="调试：">Commissioning:</trans> <trans data-src="!">!</trans> <trans data-src="[](">[](</trans> <trans data-src="https://cdn.nowtime.cc/2022/02/11/457176485.png">https://cdn.nowtime.cc/2022/02/11/457176485.png</trans> <trans data-src=")">)</trans>
React+MobX (mobx utils) realizes deep monitoring value changes Author: Chuwen Time: 2022-02-10 Classification: React comment <trans data-src="相关链接：">Related links:</trans> <trans data-src="- ">- </trans> <trans data-src="https://github.com/mobxjs/mobx/issues/214#issuecomment">https://github.com/mobxjs/mobx/issues/214#issuecomment</trans> <trans data-src="-430218360">-430218360</trans> <trans data-src="- ">- </trans> <trans data-src="https://github.com/mobxjs/mobx-utils#deepobserve">https://github.com/mobxjs/mobx-utils#deepobserve</trans> <trans data-src="## 安装 mobx-utils">##Install mobx utils</trans> <trans data-src="mobx-utils GitHub 项目地址: ">Mobx utils GitHub project address:</trans> <trans data-src="https://github.com/mobxjs/mobx-utils">https://github.com/mobxjs/mobx-utils</trans> <trans data-src="`yarn add mobx-utils` 或者 `npm install --save mobx-utils`">`Yarn add mobx utils' or 'npm install -- save mobx utils`</trans> <trans data-src="## 使用 mobx-utils">##Using mobx utils</trans> <trans data-src="此代码仅仅是示例代码">This code is just sample code</trans> <trans data-src="> ">> </trans> <trans data-src="⚠️ ">⚠️ </trans> <trans data-src="注意，根据自己的业务逻辑，如页面切换后调用 `disposer()` 去注销监听，否则**重复注册**深度监听会造成内存泄漏！">Note that according to your own business logic, for example, call 'disposer()' after the page switch to log off listening, otherwise * * re registration * * deep listening will cause memory leakage!</trans> <trans data-src="SettingsStore.ts:">SettingsStore.ts:</trans> <trans data-src="```ts">```ts</trans> <trans data-src="import {action, ">import {action, </trans> <trans data-src="makeObservable, observable} from "mobx";">makeObservable, observable} from "mobx";</trans> <trans data-src="export interface ISettingsStore{">export interface ISettingsStore{</trans> <trans data-src="show: boolean;">show: boolean;</trans> <trans data-src="}">}</trans> <trans data-src="export default class SettingsStore implements ISettingsStore {">export default class SettingsStore implements ISettingsStore {</trans> <trans data-src="@observable public show: boolean = false;">@observable public show: boolean = false;</trans> <trans data-src="constructor() {">constructor() {</trans> <trans data-src="makeObservable(this)">makeObservable(this)</trans> <trans data-src="}">}</trans> <trans data-src="}">}</trans> <trans data-src="```">```</trans> <trans data-src="SettingsPage.tsx:">SettingsPage.tsx:</trans> <trans data-src="```ts">```ts</trans> <trans data-src="const settingsStore = new SettingsStore()">const settingsStore = new SettingsStore()</trans> <trans data-src="const disposer = deepObserve(settingsStore, (change, ">const disposer = deepObserve(settingsStore, (change, </trans> <trans data-src="path) => {">path) => {</trans> <trans data-src="console.log(change)">console.log(change)</trans> <trans data-src="})">})</trans> <trans data-src="// 请注意，根据自己的业务逻辑，如页面切换后调用 disposer() 去注销监听，否则重复注册深度监听会造成内存泄漏！">//Please note that according to your own business logic, such as calling disposer() to log off listening after page switching, or repeated registration of deep listening will cause memory leakage!</trans> <trans data-src="// disposer()">// disposer()</trans> <trans data-src="```">```</trans> <trans data-src="---">---</trans> <trans data-src="## 个人项目实践">##Personal project practice</trans> <trans data-src="1. 将**注册监听器**和**销毁监听器**放到一个文件导出来">1. Put * * Registered Listener * * and * * Destroyed Listener * * into a file to export</trans> <trans data-src="2. 在需要用的页面(A 页面)，初始化完成后(如从 API 成功获取数据)，执行**注册监听器**">2. On the required page (Page A), after initialization is completed (such as successfully obtaining data from the API), execute * * Register Listener**</trans> <trans data-src="3. 在路由上监听，离开 A 页面事件，执行**销毁监听器**">3. Listen on the route, leave the A page event, and execute * * destroy the listener**</trans>
Mbox+ReactECharts does not update data Author: Chuwen Time: 2022-01-12 Classification: React comment <trans data-src="tsx 如下：">Tsx is as follows:</trans> <trans data-src="```">```</trans> <trans data-src="<ReactECharts option={this.props.shipmentsLookupsChartStore?.getOptions}/>"><ReactECharts option={this.props.shipmentsLookupsChartStore?.getOptions}/></trans> <trans data-src="```">```</trans> <trans data-src="store 如下:">The store is as follows:</trans> <trans data-src="> 如果按照以下 `setOptionsData` 就会出现问题，数据已经给了，但是视图不会更新">>If you follow the following 'setOptionsData', there will be a problem. The data has been given, but the view will not be updated</trans> <trans data-src="```ts">```ts</trans> <trans data-src="import {action, ">import {action, </trans> <trans data-src="computed, makeObservable, observable} from "mobx";">computed, makeObservable, observable} from "mobx";</trans> <trans data-src="export default class ChartStore implements IChart {">export default class ChartStore implements IChart {</trans> <trans data-src="@observable public options = ChartOption;">@observable public options = ChartOption;</trans> <trans data-src="constructor() {">constructor() {</trans> <trans data-src="makeObservable(this)">makeObservable(this)</trans> <trans data-src="}">}</trans> <trans data-src="@computed">@computed</trans> <trans data-src="get getOptions(): any {">get getOptions(): any {</trans> <trans data-src="return this.options">return this.options</trans> <trans data-src="}">}</trans> <trans data-src="@action.bound">@action.bound</trans> <trans data-src="setOptionsData(data: ChartOptionsData): void {">setOptionsData(data: ChartOptionsData): void {</trans> <trans data-src="// 设置 x 轴数据">//Set x-axis data</trans> <trans data-src="if (this.options?.">if (this.options?.</trans> <trans data-src="xAxis[0]?.">xAxis[0]?.</trans> <trans data-src="data) {">data) {</trans> <trans data-src="this.options.xAxis[0].data = data.xAxisData;">this.options.xAxis[0].data = data.xAxisData;</trans> <trans data-src="}">}</trans> <trans data-src="}">}</trans> <trans data-src="}">}</trans> <trans data-src="```">```</trans> <trans data-src="### 解决办法">###Solution</trans> <trans data-src="> 原因是深浅克隆的原因，仅作为记录，不保证我说的一定是正确的">>The reason is that the reason for deep and shallow cloning is only for record, and it does not guarantee that what I said is correct</trans> <trans data-src="首先安装 `lodash`，`setOptionsData` 方法改为如下，就可以正常运行了：">First, install 'lodash', and change the 'setOptionsData' method to the following, which will run normally:</trans> <trans data-src="```ts">```ts</trans> <trans data-src="@action.bound">@action.bound</trans> <trans data-src="setOptionsData(data: ChartOptionsData): void {">setOptionsData(data: ChartOptionsData): void {</trans> <trans data-src="//深度克隆数据">//Deep clone data</trans> <trans data-src="const newOption = cloneDeep(this.options)">const newOption = cloneDeep(this.options)</trans> <trans data-src="// 设置 x 轴数据">//Set x-axis data</trans> <trans data-src="if (this.options?.">if (this.options?.</trans> <trans data-src="xAxis[0]?.">xAxis[0]?.</trans> <trans data-src="data) {">data) {</trans> <trans data-src="newOption.xAxis[0].data = data.xAxisData">newOption.xAxis[0].data = data.xAxisData</trans> <trans data-src="}">}</trans> <trans data-src="this.options = newOption">this.options = newOption</trans> <trans data-src="}">}</trans> <trans data-src="```">```</trans>
React+Vite+TypeScript reads environment variables and reports an error: Uncaught ReferenceError: process is not defined Author: Chuwen Time: 2022-01-05 Classification: React comment <trans data-src="Uncaught ReferenceError: process is not defined:">Uncaught ReferenceError: process is not defined:</trans> <trans data-src="相关来源：">Relevant sources:</trans> <trans data-src="https://github.com/vitejs/vite/issues/1973#issuecomment">https://github.com/vitejs/vite/issues/1973#issuecomment</trans> <trans data-src="-787571499">-787571499</trans> <trans data-src="解决办法，在 `vite.config.json`:">Solution: In 'vite. config. json':</trans> <trans data-src="```json">```json</trans> <trans data-src="import {defineConfig, ">import {defineConfig, </trans> <trans data-src="loadEnv} from 'vite'">loadEnv} from 'vite'</trans> <trans data-src="import react from '@vitejs/plugin-react'">import react from '@vitejs/plugin-react'</trans> <trans data-src="export default ({mode}: { mode: string }) => {">export default ({mode}: { mode: string }) => {</trans> <trans data-src="return defineConfig({">return defineConfig({</trans> <trans data-src="define:{">define:{</trans> <trans data-src="'process.env':{...process.env, ...loadEnv(mode, ">'process.env':{...process.env, ...loadEnv(mode, </trans> <trans data-src="process.cwd())}">process.cwd())}</trans> <trans data-src="}">}</trans> <trans data-src="});">});</trans> <trans data-src="}">}</trans> <trans data-src="```">```</trans> <trans data-src="然后在你的环境变量文件以 `VITE_` 开头命名，然后使用 `process.env.">Then name your environment variable file with 'VITE_', and then use 'process. env</trans> <trans data-src="VITE_XXX` 获取就好了">VITE_XXX ` Just get it</trans>