如何在reactjs中更新狀態？

Question

最初我有一個CKeditor組件，從那里有一個狀態變量editorContent

 <CKEditor id="currentCKEditor" activeClass="editor" key={this.state.editorContent} content={this.state.editorContent} events={{ "change": this.onChange, "instanceReady": this.ckeditorInstanceReady }} />

呈現組件時，editorContent來自templatestoreChange。

_templateStoreChange(type) {

    if (type == 'SingleTemplate') {
        let singletemplate = TemplateStore._getSingleTemplate() || {};
        console.log("single template response", singletemplate);
        this.setState({ editorContent: singletemplate.template.html });
    }
}

在這里調用templateStoreChange logSig之后，editorContent發生更改。

  logSig = () => {
   const signaturedata = this.signaturePad.toDataURL();

    let elem= '<img alt src=' + signaturedata + ' />';
    this.setState({
        openSignatureDialog: false,
        editorContent:elem
    })
    console.log("signaturedata", signaturedata);

}`enter code here`

我需要更新狀態，而不是刪除整個狀態並將其更改為新狀態。

Answer 1

您僅將elem變量分配給editorContent並且丟失了之前創建的全部內容。

解決方案是將elem變量連接到現有狀態。

logSig = () => {
    const signaturedata = this.signaturePad.toDataURL();

    let elem = '<img alt src=' + signaturedata + ' />';
    this.setState({
        openSignatureDialog: false,
        editorContent: this.state.editorContent + elem
    })
}