如何编辑使用Quill创建的，通过Express / Mongo保存并呈现在编辑页面上的文本？

Question

我正在使用文本正文的React和Quill（react-quill）创建一个博客站点。我可以很好地创建，显示和删除博客文章，但不能对其进行编辑。

我尝试使用反应羽毛笔 value={this.props.post.body}方法同时使用defaultValue={this.props.post.body}和onChange，但没有成功。在这两种情况下，我都可以很好地渲染工具栏和文本区域，但是使用value可以看到渲染的正文，但是我不能对其进行更改，而使用defaultValue可以看不到呈现的文字，但可以进行更改。

为清楚起见，我想同时在编辑器中查看呈现的HTML，并对其进行编辑

class EditPost extends Component {
  constructor(props) {
    super(props);

    this.state = {
      title: "",
      tagline: "",
      body: ""
    };

    this.onChange = this.onChange.bind(this);
    this.onChangeBody = this.onChangeBody.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(e) {
    const { match, history } = this.props;
    e.preventDefault();

    const updatedPost = {
      title: this.state.title,
      tagline: this.state.tagline,
      body: this.state.body,
      images: this.state.images
    };

    this.props.editPost(updatedPost, match.params.id, history);
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  // this is the change event for the Quill component
  onChangeBody(value) {
    this.setState({ body: value });
  }

  // map the state to the properties passed down from Redux
  componentDidMount() {
    const { id } = this.props.match.params;
    this.props.getPost(this.props.match.params.id);
  }

  render() {
    const { post, comments } = this.props.posts;

    return (
      <div className="editPost">
        <div className="jumbotron-fluid">
          <div className="container">
            <h1 className="display-5 py-5 text-center">Edit Post</h1>
          </div>
        </div>
        <div className="container">
          <div className="row">
            <div className="col-md-8 offset-md-2">
              <form onSubmit={this.onSubmit}>
                <div className="form-group">
                  <label>Title</label>
                  <input
                    type="text"
                    name="title"
                    className="form-control"
                    placeholder="Enter a title for your post"
                    onChange={this.onChange}
                    defaultValue={post.title}
                  />
                </div>
                <div className="form-group">
                  <label>Tagline</label>
                  <input
                    type="text"
                    name="tagline"
                    className="form-control"
                    placeholder="Give your post a tagline"
                    onChange={this.onChange}
                    defaultValue={post.tagline}
                  />
                </div>

                <div className="form-group">
                  <ReactQuill
                    className=""
                    value={post.body} // value = uneditable text, defaultValue = no text but can write
                    onChange={this.onChangeBody}
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="">Upload an image (not working yet)</label>
                  <input type="file" className="form-control-file" />    
                </div>

                <input type="submit" value="Submit" />
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

当我使用value={this.props.post.body}时，出现错误给定范围不在文档中。，而且我没有任何运气来搜索它。使用此方法将显示格式化的正文，但无法编辑。使用defaultValue将显示一个空白但可编辑的文本区域。