我正在将页面从基于 typescript 模板的 create-react-app 应用程序集成到基于 javascript 模板的 create-react-app 应用程序。 首先，我按照本文档中给出的所有步骤使 typescript 与现有的 javascript React 应用程序兼容 https://github.com/Microsoft/TypeScript-React-Conversion-Guide#typescript-react-conversion-guide
现在，将新页面添加到转换后的应用程序中后，我在尝试渲染 ReactApexChart 组件时收到以下错误。当我在纯打字稿应用程序中尝试此操作时，此错误并不明显。此错误仅在我尝试集成新页面的应用程序中很明显。
apexcharts.common.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'indexOf')
at t.value (apexcharts.common.js:6:1)
at t.value (apexcharts.common.js:6:1)
at t.value (apexcharts.common.js:6:1)
at t.value (apexcharts.common.js:6:1)
at t.value (apexcharts.common.js:14:1)
at t.create (apexcharts.common.js:6:1)
at apexcharts.common.js:14:1
at new Promise (<anonymous>)
at t.value (apexcharts.common.js:14:1)
at r.value (react-apexcharts.min.js:1:1)
value @ apexcharts.common.js:6
value @ apexcharts.common.js:6
value @ apexcharts.common.js:6
value @ apexcharts.common.js:6
value @ apexcharts.common.js:14
(anonymous) @ apexcharts.common.js:6
(anonymous) @ apexcharts.common.js:14
value @ apexcharts.common.js:14
value @ react-apexcharts.min.js:1
commitLayoutEffectOnFiber @ react-dom.development.js:23305
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
apexcharts.common.js:6
这是我的自定义图表组件
const ChartCustom: FC<IChartProps> = ({ series, options, type, width, height, className, ...props }) => {
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<div className={classNames('apex-chart', className)} {...props}>
<ReactApexChart
options={{
colors: [
process.env.REACT_APP_PRIMARY_COLOR,
process.env.REACT_APP_SECONDARY_COLOR,
process.env.REACT_APP_SUCCESS_COLOR,
process.env.REACT_APP_INFO_COLOR,
process.env.REACT_APP_WARNING_COLOR,
process.env.REACT_APP_DANGER_COLOR,
],
plotOptions: {
candlestick: {
colors: {
upward: process.env.REACT_APP_SUCCESS_COLOR,
downward: process.env.REACT_APP_DANGER_COLOR,
},
},
boxPlot: {
colors: {
upper: process.env.REACT_APP_SUCCESS_COLOR,
lower: process.env.REACT_APP_DANGER_COLOR,
},
},
},
...options,
}}
series={series}
// @ts-ignore
type={type}
width={width}
height={height}
/>
</div>
);
};
这是我的 package.json 文件：
{
"name": "qconnect-client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@chakra-ui/icons": "2.0.17 ",
"@chakra-ui/react": "2.4.9",
"@emotion/react": "^11.10.6",
"@emotion/styled": "11.8.1",
"@hello-pangea/dnd": "^16.2.0",
"@natscale/react-calendar": "0.0.0-beta.23",
"@omtanke/react-use-event-outside": "^1.0.1",
"@popperjs/core": "^2.11.6",
"@reactour/tour": "^3.2.1",
"@reduxjs/toolkit": "1.8.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^29.5.1",
"@types/node": "^18.16.5",
"@types/react": "^18.2.6",
"@types/react-dom": "^18.2.4",
"apexcharts": "^3.40.0",
"axios": "0.27.2",
"chart.js": "3.9.1",
"chartjs-chart-treemap": "2.0.2",
"chroma-js": "2.4.2",
"classnames": "^2.3.2",
"date-fns": "^2.29.3",
"dayjs": "^1.11.7",
"env-cmd": "10.1.0",
"formik": "^2.2.9",
"framer-motion": "^9.1.7",
"i18next": "^22.4.10",
"i18next-browser-languagedetector": "^7.0.1",
"i18next-http-backend": "^2.1.1",
"jsx-to-string": "^1.4.0",
"lodash": "4.17.21",
"moment": "^2.29.4",
"pascalcase": "^2.0.0",
"payment": "^2.4.6",
"prismjs": "^1.29.0",
"prop-types": "^15.8.1",
"qs": "6.11.0",
"randomcolor": "0.6.2",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-big-calendar": "^1.6.8",
"react-chartjs-2": "4.1.0",
"react-credit-cards": "^0.8.3",
"react-date-range": "^1.4.0",
"react-datepicker": "4.8.0",
"react-dom": "^18.2.0",
"react-i18next": "^12.2.0",
"react-image-webp": "^0.8.0",
"react-input-mask": "^2.0.4",
"react-jss": "^10.10.0",
"react-modern-calendar-datepicker": "^3.1.6",
"react-moment": "1.1.2",
"react-notifications-component": "^4.0.1",
"react-number-format": "^5.1.3",
"react-popper": "^2.3.0",
"react-redux": "8.0.1",
"react-router-dom": "^6.8.1",
"react-router-hash-link": "^2.4.3",
"react-scripts": "5.0.1",
"react-scrollspy": "^3.4.3",
"react-syntax-highlighter": "^15.5.0",
"react-toast-notifications": "^2.5.1",
"react-transition-group": "^4.4.5",
"react-use": "^17.4.0",
"redux-logger": "3.0.6",
"redux-thunk": "2.4.1",
"use-clipboard-copy": "^0.2.0",
"web-vitals": "^3.1.1",
"yarn": "1.22.19",
"@ionic/cli": "^7.1.1",
"react-icons": "^4.8.0",
"swiper": "^9.2.4"
},
"scripts": {
"start": "react-scripts start",
"start:prod": "env-cmd -f ./.env.prod npm run-script start",
"build": "react-scripts build",
"build:prod": "env-cmd -f ./.env.prod npm run-script build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"serve": "serve -s build",
"lint": "eslint .",
"lint:fix": "eslint --fix --ext .js --ext .ts --ext .jsx --ext .tsx ./src",
"lint:scss": "stylelint **/*.scss",
"lint:fix-scss": "stylelint --fix **/*.scss",
"icon": "svgr SvgIcons -d src/components/icon/svg-icons --typescript",
"storybook": "start-storybook -p 6006",
"storybook-withoutCache": "start-storybook -p 6006 --no-manager-cache",
"build-storybook": "build-storybook"
},
"_moduleAliases": {
"@modules": "build/modules",
"@core": "build/core"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
">0.2%"
]
},
"devDependencies": {
"@faker-js/faker": "6.3.1",
"@svgr/cli": "^6.5.1",
"@types/pascalcase": "^1.0.1",
"@types/payment": "^2.1.4",
"@types/prismjs": "^1.26.0",
"@types/react-big-calendar": "^1.6.0",
"@types/react-credit-cards": "^0.8.1",
"@types/react-date-range": "^1.4.4",
"@types/react-input-mask": "^3.0.2",
"@types/react-router-hash-link": "^2.4.5",
"@types/react-scrollspy": "^3.3.5",
"@types/react-syntax-highlighter": "^15.5.6",
"@types/react-transition-group": "^4.4.5",
"@whitespace/storybook-addon-html": "^5.1.1",
"animate.css": "^4.1.1",
"bootstrap": "^5.2.3",
"eslint": "^8.34.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"@typescript-eslint/eslint-plugin": "^4.7.0",
"@typescript-eslint/parser": "^4.7.0",
"prettier": "^2.8.4",
"react-scripts": "5.0.1",
"sass": "^1.58.3",
"sass-loader": "^13.2.0",
"source-map-loader": "^4.0.1",
"storybook-addon-jsx": "^7.3.15-canary.162.1301.0",
"stylelint": "^15.2.0",
"stylelint-config-prettier-scss": "^0.0.1",
"stylelint-config-standard": "^30.0.1",
"stylelint-config-standard-scss": "^7.0.1",
"stylelint-config-twbs-bootstrap": "^7.0.0",
"stylelint-declaration-block-no-ignored-properties": "^2.7.0",
"stylelint-declaration-strict-value": "^1.9.2",
"stylelint-no-px": "^1.0.1",
"stylelint-order": "^6.0.2",
"stylelint-prettier": "^3.0.0",
"stylelint-scss": "^4.4.0",
"trim-newlines": "^4.0.2",
"ts-loader": "^9.4.2",
"tsconfig-paths": "^4.2.0",
"typescript": "^4.4.0",
"webpack": "5",
"webpack-cli": "^5.0.2"
},
"jest": {
"transformIgnorePatterns": [
"<rootDir>/node_modules/(?!pascalcase|prismjs|@omtanke/react-use-event-outside/.*)"
]
},
"resolutions": {
"glob-parent": ">=5.1.2",
"json5": ">=2.2.2",
"nth-check": ">=2.1.1",
"trim": "^1.0.1"
},
"overrides": {
"glob-parent": ">=5.1.2",
"json5": ">=2.2.2",
"nth-check": ">=2.1.1",
"trim": "^1.0.1"
}
}
这是我的 tsconfig.json 文件
{
"ts-node": {
// Do not forget to `npm i -D tsconfig-paths`
"require": ["tsconfig-paths/register"]
},
// "extends":"@tsconfig/node12/tsconfig.json",
"compilerOptions": {
"outDir": "./dist/", // path to output directory
"sourceMap": true, // allow sourcemap support
"strictNullChecks": true, // enable strict null checks as a best practice
"module": "CommonJS", // specify module code generation
"jsx": "react-jsx", // use typescript to transpile jsx to js
"target": "ESNext", // specify ECMAScript target version
"allowJs": true, // allow a partial TypeScript and JavaScript codebase
"skipLibCheck": true,
"lib": ["es5", "es6", "es7","DOM"],
// "target": "es2017",
// "module": "commonjs",
"moduleResolution": "node",
"rootDir": "src",
// "outDir": "build",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"noImplicitAny": true,
"strict": true,
"resolveJsonModule": true,
"baseUrl": ".",
"paths": {
"@modules/*": ["src/modules/*"],
"*": ["node_modules/*"]
},
"allowSyntheticDefaultImports": true,
"typeRoots" : ["node_modules/@types", "src/type"]
// "preserveConstEnums": true
},
"include": [
"./src/**/*",
"./src/index.d.ts",
"./src/declaration.d.ts"
],
"exclude": [
"node_modules",
"./node_modules",
"./node_modules/*",
// "./node_modules/@types/node/index.d.ts",
]
}
我通过使用浏览器的开发者工具进行运行时调试来验证状态和属性是否正确传递给组件。
我验证了是否存在任何版本不匹配的情况，并尝试了各种版本的 React apex 图表库。
我认为我在数据（状态和道具）和版本方面也没有任何问题。
我从这里找到了解决方案
https://github.com/apexcharts/apexcharts.js/issues/1297
基本上，数据系列是异步的，并且在数据可用之前加载。为了解决问题，只需做这样的事情
salary[0] === undefined ? [] : salary