react-native : state not updated inside the componentWillReciveProps

Question

i was searching so many ways to solve this, but no one works, setState still not working inside the componentWillReciveProps method here is my code :

export class Detail extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state = {
      ids: 'ger'
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ ids: nextProps.data }, () => {
          console.log(nextProps.data+"=this id")
      });
  }


  render()
   {
    return (
      <View>
        <Text>{this.state.ids}</Text>
      </View>
    );
  }
}

if i do console.log(nextProps.data+"=this id") it can return the id that i want to update to this.state.ids . But in the <Text>{this.state.ids}</Text> in the render still shows the default value of this.state.ids ('ger') , means that this.state.ids did not updated in the componentWillReceiveProps.

I think this is related to your [previous question](https://stackoverflow.com/q/46389012/2315280) and might be caused by that you don't have `key` prop on your rendered item on your `ListView`. Please take a look at [this answer](https://stackoverflow.com/a/35229429/2315280) — bennygenel, Sep 24 '17 at 13:02
i tried that way and still get this problem, the strange one is that `nextProps.data` get the id successfully when i do `console.log(nextProps.data+"=this id")` (for example, the output is "4=this id") but the ids state still not updated, even i already do `this.setState({ ids: nextProps.data })` inside the `componentWillReceiveProps` :'( — janotama, Sep 24 '17 at 13:14

score 1 · Answer 1 · answered Sep 24 '17 at 13:22

setState() does not always immediately update the component.

you could find all you need on here.

actually as react document saya "React doesn't call componentWillReceiveProps with initial props during mounting. It only calls this method if some of component's props may update. Calling this.setState generally doesn't trigger componentWillReceiveProps."

you could find more here.

score 0 · Answer 2 · answered Sep 24 '17 at 14:17

0

This looks like an antipattern to me. Why are you not injecting nextProps.data directly as ids into the Detail component? Then you can output the ids directly like this:

<Text>{this.props.ids}</Text>

Usually you should also get a warning that calling setState in "componentWillReceiveProps" will have no effect. If you really wanted to update your state instead you can do "this.state.ids = nextProps.data" I think.

answered Sep 24 '17 at 14:17

justadudewhohacks

671
4
12

I believe you are wrong about setting state. Check the [react docs for using state correctly](https://facebook.github.io/react/docs/state-and-lifecycle.html#using-state-correctly) for more information about it. – bennygenel Sep 24 '17 at 14:39
I know that, setting state with this.state.something = ... will set the state but not rerender the component. After componentWillReceiveProps however, the component should rerender since the props changed unless shouldComponentUpdate returns false. But as I said setting state this way is not good practice. – justadudewhohacks Sep 24 '17 at 14:49

react-native : state not updated inside the componentWillReciveProps

2 Answers2