securingsincity / react-ace

React Ace Component
http://securingsincity.github.io/react-ace/
MIT License
4.02k stars 603 forks source link

State is equal to it's default value on commands exec function call #1846

Open crva opened 8 months ago

crva commented 8 months ago

Problem

I'm trying to execute a function when a user press Command+Enter but my parent state value became it's default value when I use exec from the editor commands array.

The part that I don't understand is that when I execute my function from a button it works, my state is correct.

Sample code to reproduce your issue

EditorParent.jsx

const [value, setValue] useState('' as string);

const doSomething = () => {
  handle(value) // value will be `''` if I use the `exec` method from the ace editor, but the correctly set value when executed from the button. 
}

return <Editor value={value} setValue={setValue} doSomething={doSomething} />

Editor.jsx

function Editor({ value, setValue, doSomething }) {
      <AceEditor
        // ...
        onChange=(newValue => setValue(newValue))
        value={value}
        commands={[
          {
            name: 'doSomething',
            bindKey: { win: 'Ctrl-Enter', mac: 'Command-Enter' },
            exec: () =>
              doSomething(), // value will be `''`
          },
        ]}
      />
      <Button
        onClick={() => doSomething()} // value will be correct
      >
        Execute
      </Button>
}
ddt313 commented 8 months ago

same issue

ddt313 commented 8 months ago

Check the workaround here: https://github.com/securingsincity/react-ace/issues/684