小编gis*_*ube的帖子

我正在使用Draft.js来实现文本编辑器.我想将编辑器的内容保存到数据库中,然后将其检索并再次将其注入编辑器,例如重新访问编辑器页面时.

首先,这些是相关的进口

import { ContentState, EditorState, convertToRaw, convertFromRaw } from 'draft-js';

我如何将数据保存到数据库(位于父组件中)

saveBlogPostToStore(blogPost) {
    const JSBlogPost = { ...blogPost, content: convertToRaw(blogPost.content.getCurrentContent())};
    this.props.dispatch(blogActions.saveBlogPostToStore(JSBlogPost));
}

现在,当我检查数据库时,我得到以下对象:

[{"_id":null,"url":"2016-8-17-sample-title","title":"Sample Title","date":"2016-09-17T14:57:54.649Z","content":{"blocks":[{"key":"4ads4","text":"Sample Text Block","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[]}]},"author":"Lukas Gisder-Dubé","__v":0,"tags":[]}]

到目前为止我觉得很好,我尝试了一些其他的东西,数据库中的对象肯定是转换的.例如,当我在不调用convertToRaw()方法的情况下保存内容时,还有更多字段.

将数据设置为新的EditorState

要从数据库中检索数据并将其设置为EditorState,我也尝试了很多.以下是我最好的猜测:

constructor(props) {
    super(props);
    const DBEditorState = this.props.blogPost.content;
    console.log(DBEditorState); // logs the same Object as above
    this.state = { ...this.props.blogPost, content: EditorState.createWithContent(
        convertFromRaw(DBEditorState)
    )};
}

渲染组件时,我收到以下错误:

convertFromRawToDraftState.js:38 Uncaught TypeError: Cannot convert undefined or null to object

任何帮助是极大的赞赏!

我正在使用react,react-router(v4),redux和webpack(-dev-server)来构建应用程序.Devserver和eveything工作正常,包括HMR和historyApiFallback.也就是说,当我进入http://localhost:8080/how我得到index.html,bundle.js(我的应用程序),和右构件How被渲染.

我的基本路由如下:

//App.js 
<Router>
    <Wrapper>
        <Route path='/' component={MainNav} />
        <Route exact path='/' component={Splash} />
        <Route path='/how' component={How} />
        <Route path='/auth' component={Auth} />
        <Route path='/' component={Footer} />
    </Wrapper>

但是,在声明子路线时,例如Auth:

<Wrapper orange>
    Login Page
    <Link to={loginUrl}>Login</Link>
    <Switch>
        <Route exact path='/auth/login' component={Login} />
        <Route path='/register' component={Register} />
    </Switch>
</Wrapper>

进入时我从react-router获得404 http://localhost:8080/auth/login.当导航到http://localhost:8080/auth/loginApp内时,例如在链接点击时,Login正在渲染组件.

我知道StackOverflow上有很多类似的问题,但奇怪的是顶级路由正在呈现而没有问题,这只发生在嵌套路由上.此外,它可能不是webpack-dev-server(historyApiFallback或publicPath)的问题,因为我还可以将应用程序捆绑生产并与节点服务器一起提供,结果相同.

另外,我没有看到react-router文档中的基本示例有所不同.

仅供参考,这是我的webpack配置:

module.exports = {
    context: …