javascript - how to update state and take a decision on updated state in react native - Stack Overflow

admin管理员组

文章数量:1287146

I am using the Picker ponent in my app. And there is list view on the screen. Based on the selected value of the Picker, list view gets updated. Here is the code

<Picker style={{ flex: 0.3, marginTop: -10 }}
  selectedValue={this.state.helpModel.needyType}
  onValueChange={(itemValue, itemIndex) => {
    this.setState((prevState) => {
      return { helpModel: { needyType: itemValue, helpStatus: prevState.helpModel.helpStatus } }
    });
    this.getNeedies(this.state.helpModel);
  }}>
  {this.state.helpCategory.map((data, index) => {
    return (
      <Picker.Item key={data.id} label={data.title} value={data.value} />
    );
  })}
</Picker>

I have used state variable (this.state.helpModel.needyType) to bind the selectedValue of the picker and on the onValueChange I am updating the state variable. Then a method is called based on the this.state.helpModel that will get the list data and update the list view. But helpModel is not getting the update immediately so it retains the previous values for a time but in that time getNeedies method is called and based on the previous value data is requested.

May be this is because setState is of async behaviour. I have solved this using to call getNeedies method after some 2-3 seconds using setTimeout. But is there any better or elegant way to do the same? May be .then like in promises?

I have just started with React Native, so please ignore if this is too basic to ask.

I am using the Picker ponent in my app. And there is list view on the screen. Based on the selected value of the Picker, list view gets updated. Here is the code

<Picker style={{ flex: 0.3, marginTop: -10 }}
  selectedValue={this.state.helpModel.needyType}
  onValueChange={(itemValue, itemIndex) => {
    this.setState((prevState) => {
      return { helpModel: { needyType: itemValue, helpStatus: prevState.helpModel.helpStatus } }
    });
    this.getNeedies(this.state.helpModel);
  }}>
  {this.state.helpCategory.map((data, index) => {
    return (
      <Picker.Item key={data.id} label={data.title} value={data.value} />
    );
  })}
</Picker>

I have used state variable (this.state.helpModel.needyType) to bind the selectedValue of the picker and on the onValueChange I am updating the state variable. Then a method is called based on the this.state.helpModel that will get the list data and update the list view. But helpModel is not getting the update immediately so it retains the previous values for a time but in that time getNeedies method is called and based on the previous value data is requested.

May be this is because setState is of async behaviour. I have solved this using to call getNeedies method after some 2-3 seconds using setTimeout. But is there any better or elegant way to do the same? May be .then like in promises?

I have just started with React Native, so please ignore if this is too basic to ask.

• javascript
• react-native
• state

Share Improve this question Follow asked Feb 3, 2018 at 12:11 Code GuruCode Guru 15.6k3030 gold badges143143 silver badges210210 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Since setState works in an asynchronous way. That means after calling setState the this.state is not immediately changed. So if you want to perform an action immediately after setting state, use 2nd argument as callback on setState. Consider this example:

this.setState({
    data: newData
}, () => {
  //TODO: Do something with this.state here
});

Changing the state through setState method does not immediately update the state of the app. A callback function is to be used.

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
});

Here is Link in detail if you want to follow.

本文标签： javascripthow to update state and take a decision on updated state in react nativeStack Overflow