React-ace: setState di onChange akan memblokir editor

Saya memiliki apa yang menurut saya merupakan masalah yang serupa. Saya meletakkan konten teks editor di negara bagian dan menyetel value ke teks yang ada di negara bagian.

<AceEditor
    value={this.state.text}
    onChange={(newValue) => this.textChanged(newValue)}/>

Ini tidak berfungsi dengan baik. Saya pikir editor sedang diinisialisasi ulang pada setiap langkah yang tidak terlalu bagus :(

Saya masih mengerjakan apa yang sedang terjadi.

Saya pikir akar dari masalah ini adalah jika Anda mengubah teks, komponen selalu diperbarui.

Salah satu solusinya adalah menambahkan shouldComponentUpdate() yang hanya diperbarui ketika properti telah berubah ATAU ketika properti teks tidak sama dengan teks yang ditampilkan di editor.

atau tidak, ternyata saya masih tidak terlalu mengerti ini: senyum:

Saya mengalami masalah serupa

edit:
Saya menemukan solusi untuk masalah khusus saya.
Saya mengalami masalah saat mencoba menangkap input menggunakan setState.
Tampaknya memiliki defaultValue menyebabkan semacam konflik. (yang menurut saya masuk akal?)
Saya menggunakan value sebagai gantinya dan sekarang onChange dan editor bekerja seperti (setidaknya seperti yang saya) harapkan.

Tidak yakin apakah ini yang dialami @mjmdavis dan @ dyf102 .

Saya selalu menggunakan 'nilai'. Saya pikir saya hanya bersikap konyol.

Adakah yang menemukan solusi untuk masalah ini?

Saya mengalami masalah yang sama.

@mbrochstein Saya dapat menemukan solusi dengan menggunakan metode Reacts shouldComponentUpdate.

shouldComponentUpdate(nextProps, nextState) {
    if (this.state.aceEditorValue !== nextState.aceEditorValue) {
      return false
    } else {
      return true;
    }
  }

Kemudian untuk metode onChange saya untuk file

onChange = (newValue) => {
    this.setState({
      aceEditorValue: newValue
    });
  }

Ini akan memperbarui status aceEditorValue dengan apa pun yang dimasukkan ke editor tanpa merender ulang seluruh komponen. Berfungsi untuk kasus penggunaan saya.

@brendancgivern Terima kasih! Saya pikir Anda membalik komparator Anda di fungsi shouldComponentUpdate , tetapi begitu saya mengalihkannya ke === , itu berfungsi dengan sempurna!

Bagaimana dengan yang ini? Ini bekerja dengan baik dalam proyek saya.

KOMPONEN ORANG TUA

    // other methods ...
    eventMDChange(value) {
        let _html = Marked(value)
        this.setState({ markdown: value, html: _html })
    }
    // other methods ...

THE EDITOR

<AceEditor
    onChange={ (raw)=>{this.eventMDChange(raw);} }
    value={ this.state.markdown }
    />

Jadi masalahnya di sini adalah kita memasuki acara ace editor sebenarnya change daripada mendengarkan dan merender ulang. Sepertinya Anda ingin dapat memanfaatkan periode waktu saat perubahan terjadi. Kita bisa memiliki hook lain di componentWillReceiveProps yang mencegah update. Secara pribadi, saya pikir solusi @brendanmcgivern adalah yang paling bersih.

Masalah yang sama di sini: /

Ini adalah bug yang sangat besar dan masih ada.
Saya mencoba menggunakan react-ace dengan https://github.com/jaredpalmer/formik dan perilakunya sama, hanya macet.

<AceEditor
mode="yaml"
theme="solarized_light"
onChange={value => {
  setFieldValue("content", value);
}}
tabSize={2}
editorProps={{ $blockScrolling: true }}
value={''}
width="100%"
/>

upd
Ini terlihat tidak bagus, tapi itu berhasil untukku. Masalah utamanya, seperti yang saya mengerti, adalah bahwa Anda lebih baik tidak menetapkan status atau melakukan apa pun dengan nilai langsung dari kartu as onChange (inline). Lebih baik Anda melakukannya di fungsi komponen yang berbeda.

import React, { Component } from "react";
import { Formik, Form, Field } from "formik";

class AcePlusFormik extends Component {
  state = { content: "" };

  /**
   * Special treatment for ace content
   * <strong i="15">@param</strong> {string} value
   */
  setContent(value) {
    this.setState({ content: value });
    this.setFieldValue("content", value);
  }

  render() {
    <Formik
      initialValues={{ title: "", content: "" }}
      onSubmit={values => console.log(values)}
    >
      {({ touched, setFieldValue }) => {
        this.setFieldValue = setFieldValue;
        return (
          <Form>
            <Field name="content">
              {({ field }) => (
                <React.Fragment>
                  <AceEditor
                    mode="yaml"
                    theme="solarized_light"
                    onChange={value => {
                      this.setContent(value);
                    }}
                    tabSize={2}
                    editorProps={{ $blockScrolling: true }}
                    value={this.state.content}
                    width="100%"
                  />
                  <input type="hidden" {...field} />
                </React.Fragment>
              )}
            </Field>
            <button
              className="button is-primary is-pulled-right"
              style={{ marginTop: "10px" }}
              type="submit"
            >
              Save
            </button>
          </Form>
        );
      }}
    </Formik>;
  }
}