react-native：状态未在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 .

Answer 1

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 .

Answer 2

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.