1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 01:36:22 +00:00

fix inconsistent updates to react component state

Executions of setState() may be batched, and so updates to this.state and
this.props can be asynchronous, so references to this.state and this.props
should not be made in the new state, and instead the callback form of
setState() should be used.

These alerts were found using lgtm.com:
https://lgtm.com/projects/g/BoostIO/Boostnote/alerts/?mode=tree&ruleFocus=1819283066

see: https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
This commit is contained in:
Sam Lanning
2018-05-14 16:00:45 -07:00
parent d6c3490165
commit 0f354f4f06
2 changed files with 21 additions and 21 deletions

View File

@@ -55,10 +55,10 @@ class SnippetTab extends React.Component {
this.handleRename() this.handleRename()
break break
case 27: case 27:
this.setState({ this.setState((prevState, props) => ({
name: this.props.snippet.name, name: props.snippet.name,
isRenaming: false isRenaming: false
}) }))
break break
} }
} }

View File

@@ -368,11 +368,11 @@ class SnippetNoteDetail extends React.Component {
name: mode name: mode
}) })
} }
this.setState({note: Object.assign(this.state.note, {snippets: snippets})}) this.setState(state => ({note: Object.assign(state.note, {snippets: snippets})}))
this.setState({ this.setState(state => ({
note: this.state.note note: state.note
}, () => { }), () => {
this.save() this.save()
}) })
} }
@@ -381,11 +381,11 @@ class SnippetNoteDetail extends React.Component {
return (e) => { return (e) => {
const snippets = this.state.note.snippets.slice() const snippets = this.state.note.snippets.slice()
snippets[index].mode = name snippets[index].mode = name
this.setState({note: Object.assign(this.state.note, {snippets: snippets})}) this.setState(state => ({note: Object.assign(state.note, {snippets: snippets})}))
this.setState({ this.setState(state => ({
note: this.state.note note: state.note
}, () => { }), () => {
this.save() this.save()
}) })
@@ -399,10 +399,10 @@ class SnippetNoteDetail extends React.Component {
return (e) => { return (e) => {
const snippets = this.state.note.snippets.slice() const snippets = this.state.note.snippets.slice()
snippets[index].content = this.refs['code-' + index].value snippets[index].content = this.refs['code-' + index].value
this.setState({note: Object.assign(this.state.note, {snippets: snippets})}) this.setState(state => ({note: Object.assign(state.note, {snippets: snippets})}))
this.setState({ this.setState(state => ({
note: this.state.note note: state.note
}, () => { }), () => {
this.save() this.save()
}) })
} }
@@ -597,17 +597,17 @@ class SnippetNoteDetail extends React.Component {
} }
jumpNextTab () { jumpNextTab () {
this.setState({ this.setState(state => ({
snippetIndex: (this.state.snippetIndex + 1) % this.state.note.snippets.length snippetIndex: (state.snippetIndex + 1) % state.note.snippets.length
}, () => { }), () => {
this.focusEditor() this.focusEditor()
}) })
} }
jumpPrevTab () { jumpPrevTab () {
this.setState({ this.setState(state => ({
snippetIndex: (this.state.snippetIndex - 1 + this.state.note.snippets.length) % this.state.note.snippets.length snippetIndex: (state.snippetIndex - 1 + state.note.snippets.length) % state.note.snippets.length
}, () => { }), () => {
this.focusEditor() this.focusEditor()
}) })
} }