React-ace: setState dans onChange bloquera l'éditeur

J'ai ce que je pense être un problème similaire. Je mets le contenu du texte de l'éditeur dans l'état et définit le value sur le texte qui est dans l'état.

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

Cela ne fonctionne pas correctement cependant. Je pense que l'éditeur est en cours de réinitialisation à chaque étape, ce qui n'est pas très bon :(

Je travaille toujours exactement ce qui se passe.

Je pense que la racine de ce problème est que si vous modifiez le texte, le composant est toujours mis à jour.

Une solution serait d'ajouter un shouldComponentUpdate() qui ne se met à jour que lorsque les propriétés ont changé OU lorsque la propriété text n'est pas égale au texte affiché dans l'éditeur.

ou pas, apparemment je ne comprends toujours pas vraiment ceci: sourire:

J'ai un problème similaire

Éditer:
J'ai trouvé une solution de contournement pour mon problème particulier.
J'avais des problèmes en essayant de capturer l'entrée en utilisant un setState.
Il semble que le fait d'avoir un defaultValue provoquait une sorte de conflit. (ce qui a du sens je suppose?)
J'ai utilisé value place et maintenant onChange et l'éditeur fonctionne comme (du moins comme je) l'attendais.

Je ne sais pas si c'est ce que vivaient @mjmdavis et @ dyf102 .

J'utilisais toujours la «valeur». Je pense que j'étais juste stupide.

Quelqu'un a-t-il trouvé une solution à ce problème?

J'ai ce même problème.

@mbrochstein J'ai pu trouver une solution de contournement en utilisant la méthode Reacts shouldComponentUpdate.

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

Puis pour ma méthode onChange pour le

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

Cela mettra à jour l'état de aceEditorValue avec tout ce qui est entré dans l'éditeur sans re-rendre le composant entier. Fonctionne pour mon cas d'utilisation.

@brendanmcgivern Merci! Je pense que vous avez retourné vos comparateurs dans la fonction shouldComponentUpdate , mais une fois que je suis passé à === , cela fonctionne parfaitement!

Et celui-là? Cela fonctionne bien dans mon projet.

LA COMPOSANTE PARENT

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

L'ÉDITEUR

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

Donc, le problème ici est que nous exploitons l'événement ace réel de l'éditeur change plutôt que l'écoute et le rendu. Il semble que vous souhaitiez pouvoir profiter de la période pendant laquelle un changement se produit. Nous pourrions avoir un autre hook dans componentWillReceiveProps qui empêche une mise à jour. Personnellement, je pense que la solution de

Même problème ici: /

Eh bien, c'est un énorme bug et il est toujours là.
J'ai essayé d'utiliser react-ace avec https://github.com/jaredpalmer/formik et le comportement est le même, ça colle juste.

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

mettre à jour
Cela n'a pas l'air sympa, mais cela a fonctionné pour moi. Le problème clé, si je comprends bien, est qu'il vaut mieux ne pas définir l'état ou faire quoi que ce soit avec la valeur directement à partir de onChange (en ligne) de l'as. Vous feriez mieux de le faire dans la fonction des différents composants.

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>;
  }
}