paicoding-admin icon indicating copy to clipboard operation
paicoding-admin copied to clipboard

启动失败

Open BoykaCheng opened this issue 2 years ago • 11 comments

image run后报错,如图所示,请教大佬

BoykaCheng avatar Aug 18 '23 07:08 BoykaCheng

楼主现在问题解决了吗?

xzpgzy avatar Sep 13 '23 16:09 xzpgzy

遇到同样的问题,不知道啥原因

yizhima avatar Sep 20 '23 06:09 yizhima

应该是版本问题,贴一下 nodejs, npm 版本

liuyueyi avatar Sep 20 '23 11:09 liuyueyi

应该是版本问题,贴一下 nodejs, npm 版本

node -v 18.12.1 npm -v 9.2.0 yarn -v 1.22.19 这三个版本是这些,捣鼓挺久,但是没有解决

xzpgzy avatar Sep 20 '23 11:09 xzpgzy

$ node -v v16.20.1 $ npm -v 8.19.4 同样遇到上述问题 按ESC后 这个错误页面消息 但一直加载进不去 image

ehZyiL avatar Sep 20 '23 14:09 ehZyiL

对于提示信息 [ error ReactDOM.render is deprecated since React 18.0.0, use createRoot instead, see https://reactjs.org/link/switch-to-createroot react/no-deprecated ],可以通过添加注释 // eslint-disable-next-line react/no-deprecated 来解决。

// ......
// react 17 创建,控制台会报错,暂时不影响使用(菜单折叠时不会出现闪烁)
// eslint-disable-next-line react/no-deprecated
ReactDOM.render(
	<Provider store={store}>
		<PersistGate persistor={persistor}>
			<App />
		</PersistGate>
	</Provider>,
	document.getElementById("root")
);

或者采用React18中的方式改写代码。注意,需要将import ReactDOM from "react-dom"改为import ReactDOM from "react-dom/client"。

import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";

import App from "@/App";
import { persistor, store } from "@/redux";

import "@/styles/reset.less";
import "@/assets/iconfont/iconfont.less";
import "@/assets/fonts/font.less";
import "@/styles/common.less";
import "virtual:svg-icons-register";

// react 17 创建,控制台会报错,暂时不影响使用(菜单折叠时不会出现闪烁)
ReactDOM.createRoot(document.getElementById("root")!).render(
	<Provider store={store}>
		<PersistGate persistor={persistor}>
			<App />
		</PersistGate>
	</Provider>
);

另外,当我在开发模式下运行项目时(即运行npm run dev),会遇见以下错误,使得页面一直无法加载,但打包之后(即运行npm run build:pro)不存在这个问题。 image

解决方法为注释或删除vite.config.ts中的以下代码(框内的代码),至于为什么这段配置会产生问题,我目前还不清楚。 image

weedien avatar Sep 29 '23 17:09 weedien

对于提示信息 [ error ReactDOM.render is deprecated since React 18.0.0, use createRoot instead, see https://reactjs.org/link/switch-to-createroot react/no-deprecated ],可以通过添加注释 // eslint-disable-next-line react/no-deprecated 来解决。

// ......
// react 17 创建,控制台会报错,暂时不影响使用(菜单折叠时不会出现闪烁)
// eslint-disable-next-line react/no-deprecated
ReactDOM.render(
	<Provider store={store}>
		<PersistGate persistor={persistor}>
			<App />
		</PersistGate>
	</Provider>,
	document.getElementById("root")
);

或者采用React18中的方式改写代码。注意,需要将import ReactDOM from "react-dom"改为import ReactDOM from "react-dom/client"。

import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";

import App from "@/App";
import { persistor, store } from "@/redux";

import "@/styles/reset.less";
import "@/assets/iconfont/iconfont.less";
import "@/assets/fonts/font.less";
import "@/styles/common.less";
import "virtual:svg-icons-register";

// react 17 创建,控制台会报错,暂时不影响使用(菜单折叠时不会出现闪烁)
ReactDOM.createRoot(document.getElementById("root")!).render(
	<Provider store={store}>
		<PersistGate persistor={persistor}>
			<App />
		</PersistGate>
	</Provider>
);

另外,当我在开发模式下运行项目时(即运行npm run dev),会遇见以下错误,使得页面一直无法加载,但打包之后(即运行npm run build:pro)不存在这个问题。 image

解决方法为注释或删除vite.config.ts中的以下代码(框内的代码),至于为什么这段配置会产生问题,我目前还不清楚。 image

改了最后那个之后文章审核的格式都没了

KarsonYu avatar Oct 12 '23 04:10 KarsonYu

@KarsonYu 你是指文章管理界面的格式吗,可以具体说说是在哪个路由下的哪个页面

weedien avatar Oct 12 '23 06:10 weedien

@KarsonYu 你是指文章管理界面的格式吗,可以具体说说是在哪个路由下的哪个页面

对,不能调整文章的状态 image

KarsonYu avatar Oct 12 '23 06:10 KarsonYu

@KarsonYu 那你上面的搜索栏中的选项中有数据吗 image

{
	title: "状态",
	dataIndex: "status",
	key: "status",
	render(_, item) {
		const { articleId, status } = item;
		return <Select 
						// 如果 status 为 1 那么 status 为 warning
						status={status === 1 ? "" : "error"}
						value={status.toString()} 
						options={PushStatusList}
						onChange={(value) => handleStatusChange(articleId, Number(value))}
					>
					</Select>;
	}
},

其中options={PushStatusList}用于设置下拉框的选项。该问题可能是由PushStatusList中的数据为空而导致的,你可以试着在控制台中输出它的值。

这个数据来自于后端,对应dict_common表;在前端项目中由redux管理,对应状态disc;在组件article/index.tsx中,通过const { PushStatusList, ToppingStatusList, OfficalStatusList} = props || {};从props中解析(redux会将disc中的数据以props的形式传递给组件)

weedien avatar Oct 12 '23 08:10 weedien

// eslint-disable-next-line react/no-deprecated

解决了,React18中的方式改写代码导致的,必须得用第一种方法改写

KarsonYu avatar Oct 12 '23 08:10 KarsonYu