Draft-js 不保存数据库

Question

我无法将 description 保存为组件状态的一部分。我只能保存标题。如何将标题和描述保存到数据库？

const BlogCreate = ({ history }) => {
const [blogCreate, setBlogCreate] = useState({
    title: "",
    description: ""
});
const [editorState, setEditorState] = useState(
    EditorState.createEmpty(),
);
const handleChange = ({ currentTarget }) => {
    const { name, value } = currentTarget;
    setBlogCreate({...blogCreate, [name]: value});
};
const onEditorStateChange = editorState => {
    setEditorState(editorState);
};
const handleSubmit = async event => {
    event.preventDefault();
    const data = draftToHtml(convertToRaw(editorState.getCurrentContent())); 
    try {
        await blogAPI.create(blogCreate, data);
    } catch (error) {
         console.log(error)
        }
    }
    console.log(data);
}
return(
      <Field type="text" name="title" error={errors.title} value={blogCreate.title} 
               onChange={handleChange} 
             />
      <Editor name="description" editorState={editorState} onEditorStateChange={editorState => onEditorStateChange(editorState)}
             />
      <button type="submit">Save</button>    
   );
}
export default BlogCreate;

Answer 1

根据您提供给我的完整代码，我意识到只要 Editor 组件发生变化，您就没有正确更新 blogCreate 状态。

onEditorStateChange()应该更新blogCreate状态，此外，changeValue()需要return结果value。

const changeValue = editorState => {
  const value = ....

  return value;
};

const onEditorStateChange = editorState => {
  const description = changeValue(editorState);
  setBlogCreate({
     ...blogCreate,
     description,
  });
  setEditorState(editorState);
};

这样，description 将正确更新您的状态，并在您发出 blogAPI.create() 请求时将其发送到您的服务器端。

Draft-js 不保存数据库

Draft-js do not save database

javascript

reactjs

draftjs

axios