setState after async action in redux

Question

Which lifecycle method I should use to set the existing value in a form? I can't do <input value={this.props.title} /> because I want to make input as a controlled component.

I can do a promise then after the async method but will this be anti pattern?

componentDidMount() {
  this.props.fetchItem(this.itemId)
  .then(v=>{this.setState({title: v.title})})
}

Vikram Thakur · Answer 1 · 2018-01-21T17:11:43.280

1

You can use componentWillReceiveProps() method to set your props value to state.

Something like this.

componentWillReceiveProps(nextProps){
 // store your props value to state here
if(nextProps.formData !== undefined){
  this.setState({ formData: nextProps.formData });
  }

}

To update that state value on input change method

handleChange = (name, value) => {
  // update state here
  this.setState({ [name]: value });
  }

edited Jan 21 '18 at 17:11

answered Jan 21 '18 at 16:36

Vikram Thakur

2,329
1
11
16

nextProps.formData is undefined at first. – Jenny Mok Jan 21 '18 at 16:39
you can add some validation, like (nextProps.formData !== undefined) – Vikram Thakur Jan 21 '18 at 17:10

setState after async action in redux

1 Answers1