标签：reactjs redux local-storage draftjs javascript
我从localStorage读取Draft.js原始内容时遇到问题.
我想将以前存储的rawContent用作reducer的initialState.
我认为convertFromRaw函数是我的问题.
我确实默默地暗恋(不登录控制台),也不知道如何解决此问题.
我将Draft.js原始内容保留在localStorage中：
const contentState = editorState.getCurrentContent();
const rawContent = convertToRaw(contentState);
window.localStorage.setItem(
"rawContent",
JSON.stringify(convertToRaw(rawContent))
);
然后,我正在尝试恢复它,我正面临我的问题.
我认为convertFromRaw.
const rawContent = window.localStorage.getItem("rawContent");
if (rawContent) {
this.state.editorState = EditorState.createWithContent(
convertFromRaw(JSON.parse(rawContent))
);
} else {
this.state.editorState = EditorState.createEmpty();
}
我对此的临时解决方案是使用第三方转换器.
在我的情况下,我使用了draft-js-export-markdown / draft-js-import-markdown中的stateToMarkdown / stateFromMarkdown
我的package.json
{
"name": "react-boilerplate",
"version": "3.7.0",
"description": "A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices",
"repository": {
"type": "git",
"url": "git://github.com/react-boilerplate/react-boilerplate.git"
},
"engines": {
"npm": ">=5",
"node": ">=8.10.0"
},
"author": "Max Stoiber",
"license": "MIT",
"scripts": {
"analyze:clean": "rimraf stats.json",
"preanalyze": "npm run analyze:clean",
"analyze": "node ./internals/scripts/analyze.js",
"extract-intl": "node ./internals/scripts/extract-intl.js",
"npmcheckversion": "node ./internals/scripts/npmcheckversion.js",
"preinstall": "npm run npmcheckversion",
"prebuild": "npm run build:clean",
"build": "cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
"build:clean": "rimraf ./build",
"start": "cross-env NODE_ENV=development node server",
"start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
"start:production": "npm run test && npm run build && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"presetup": "npm i chalk shelljs",
"setup": "node ./internals/scripts/setup.js",
"clean": "shjs ./internals/scripts/clean.js",
"clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
"generate": "plop --plopfile internals/generators/index.js",
"lint": "npm run lint:js",
"lint:css": "stylelint './app/**/*.js'",
"lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts",
"lint:eslint:fix": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts --fix",
"lint:js": "npm run lint:eslint -- . ",
"lint:staged": "lint-staged",
"pretest": "npm run test:clean && npm run lint",
"test:clean": "rimraf ./coverage",
"test": "cross-env NODE_ENV=test jest --coverage",
"test:watch": "cross-env NODE_ENV=test jest --watchAll",
"coveralls": "cat ./coverage/lcov.info | coveralls",
"prettify": "prettier --write"
},
"jest": {
"collectCoverageFrom": [
"app/**/*.{js,jsx}",
"!app/**/*.test.{js,jsx}",
"!app/app.js",
"!app/global-styles.js",
"!app/*/*/Loadable.{js,jsx}"
],
"coverageThreshold": {
"global": {
"statements": 50,
"branches": 40,
"functions": 50,
"lines": 50
}
},
"moduleDirectories": [
"node_modules",
"app"
],
"moduleNameMapper": {
".*\\.(css|less|styl|scss|sass)$": "<rootDir>/internals/mocks/cssModule.js",
".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/internals/mocks/image.js"
},
"setupTestFrameworkScriptFile": "<rootDir>/internals/testing/test-bundler.js",
"testRegex": "tests/.*\\.test\\.js$"
},
"lint-staged": {
"*.js": [
"npm run lint:eslint:fix",
"git add --force"
],
"*.json": [
"prettier --write",
"git add --force"
]
},
"pre-commit": "lint:staged",
"resolutions": {
"babel-core": "7.0.0-bridge.0"
},
"dependencies": {
"@babel/polyfill": "7.0.0",
"antd": "^3.13.1",
"axios": "^0.18.0",
"chalk": "2.4.1",
"compression": "1.7.3",
"connected-react-router": "4.5.0",
"cross-env": "5.2.0",
"draft-js": "^0.10.5",
"draft-js-export-html": "^1.3.3",
"draft-js-export-markdown": "^1.3.3",
"draft-js-import-html": "^1.3.3",
"draft-js-import-markdown": "^1.3.3",
"express": "4.16.4",
"fontfaceobserver": "2.0.13",
"history": "4.7.2",
"hoist-non-react-statics": "3.0.1",
"immutable": "3.8.2",
"intl": "1.2.5",
"invariant": "2.2.4",
"ip": "1.1.5",
"loadable-components": "2.2.3",
"lodash": "4.17.11",
"minimist": "1.2.0",
"prop-types": "15.6.2",
"react": "16.6.0",
"react-dom": "16.6.0",
"react-draft-wysiwyg": "^1.13.2",
"react-flexview": "^4.0.3",
"react-helmet": "5.2.0",
"react-intl": "2.7.2",
"react-logger-lib": "^1.0.5",
"react-rbac-guard": "0.0.3",
"react-redux": "5.0.7",
"react-router-dom": "4.3.1",
"redux": "4.0.1",
"redux-immutable": "4.0.0",
"redux-saga": "0.16.2",
"reselect": "4.0.0",
"sanitize.css": "4.1.0",
"styled-components": "4.0.2",
"warning": "4.0.2"
},
"devDependencies": {
"@babel/cli": "7.1.2",
"@babel/core": "7.1.2",
"@babel/plugin-proposal-class-properties": "7.1.0",
"@babel/plugin-syntax-dynamic-import": "7.0.0",
"@babel/plugin-transform-modules-commonjs": "7.1.0",
"@babel/plugin-transform-react-constant-elements": "7.0.0",
"@babel/plugin-transform-react-inline-elements": "7.0.0",
"@babel/preset-env": "7.1.0",
"@babel/preset-react": "7.0.0",
"@babel/register": "7.0.0",
"add-asset-html-webpack-plugin": "3.1.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.4",
"babel-plugin-dynamic-import-node": "2.2.0",
"babel-plugin-import": "^1.11.0",
"babel-plugin-lodash": "3.3.4",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-transform": "3.0.0",
"babel-plugin-styled-components": "1.8.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.19",
"circular-dependency-plugin": "5.0.2",
"compare-versions": "3.4.0",
"compression-webpack-plugin": "2.0.0",
"coveralls": "3.0.2",
"css-loader": "1.0.0",
"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.6.0",
"enzyme-to-json": "3.3.4",
"eslint": "5.7.0",
"eslint-config-airbnb": "17.1.0",
"eslint-config-airbnb-base": "13.1.0",
"eslint-config-prettier": "3.1.0",
"eslint-import-resolver-webpack": "0.10.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-prettier": "3.0.0",
"eslint-plugin-react": "7.11.1",
"eslint-plugin-redux-saga": "0.9.0",
"file-loader": "2.0.0",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"image-webpack-loader": "^4.6.0",
"imports-loader": "0.8.0",
"jest-cli": "^24.5.0",
"jest-styled-components": "6.2.2",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"lint-staged": "7.3.0",
"ngrok": "3.1.0",
"node-plop": "0.16.0",
"null-loader": "0.1.1",
"offline-plugin": "5.0.5",
"plop": "2.1.0",
"pre-commit": "1.2.2",
"prettier": "1.14.3",
"react-app-polyfill": "0.1.3",
"react-test-renderer": "16.6.0",
"rimraf": "2.6.2",
"shelljs": "0.8.2",
"style-loader": "0.23.1",
"stylelint": "^9.10.1",
"stylelint-config-recommended": "2.1.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.5.0",
"svg-url-loader": "2.3.2",
"terser-webpack-plugin": "1.1.0",
"url-loader": "1.1.2",
"webpack": "4.23.1",
"webpack-cli": "3.1.2",
"webpack-dev-middleware": "3.4.0",
"webpack-hot-middleware": "2.24.3 ",
"webpack-pwa-manifest": "3.7.1",
"whatwg-fetch": "3.0.0"
}
}
解决方法:
您的代码通常看起来正确.但正如我所看到的,您两次使用convertToRaw.
const contentState = editorState.getCurrentContent();
const rawContent = convertToRaw(contentState); // <== convert to raw first time
window.localStorage.setItem(
"rawContent",
JSON.stringify(convertToRaw(rawContent)) // <== convert to raw again
);
尝试将JSON.stringify(convertToRaw(rawContent))重写为JSON.stringify(rawContent),我认为这应该可以解决您的问题.
如果那没有帮助,您可以检查此jsFiddle,它显示了通用模式Draft.js如何与本地存储一起使用-https://jsfiddle.net/x2gsp6ju/4/
在此演示中,您可以看到简单的编辑器组件,当您单击“将原始内容保存到本地存储”时,我们会将当前编辑器内容作为字符串保存到本地存储中.我们使用convertToRaw和JSON.stringify：
saveRaw = () => {
var contentRaw = convertToRaw(this.state.editorState.getCurrentContent());
localStorage.setItem('draftRaw', JSON.stringify(contentRaw));
}
如果之后重新加载页面,将使用您保存的内容和样式来初始化编辑器.因为在构造函数中,我们读取了适当的本地存储属性,所以使用JSON.parse,convertFromRaw和createWithContent方法使用先前存储的内容初始化编辑器.
constructor(props) {
super(props);
let initialEditorState = null;
const storeRaw = localStorage.getItem('draftRaw');
if (storeRaw) {
const rawContentFromStore = convertFromRaw(JSON.parse(storeRaw));
initialEditorState = EditorState.createWithContent(rawContentFromStore);
} else {
initialEditorState = EditorState.createEmpty();
}
this.state = {
editorState: initialEditorState
};
}
标签：reactjs,redux,local-storage,draftjs,javascript 来源： https://codeday.me/bug/20191211/2105503.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。