如何在 React Native 的可搜索下拉列表中的 onTextChange 之后更新项目 object？

Question

I am using react-native-searchable-dropdown for my react native project.

When onTextChange is fired I make a call to my backend with the text the user inputs. Then I set the data I get back (array of objects) in the state:

 async inputBrandText (text) { const brands = await SearchForBrands(params); this.setState((state) => { return state.brands = brands }) };

In the items element I reference this state array:

 <SearchableDropdown textInputProps={ { placeholder: "", underlineColorAndroid: "transparent", style: {... }, onTextChange: text => this.inputBrandText(text) } } items={this.state.brands} />

But the items get refreshed one key stroke after it should actually be refreshed. So I think when the onTextChange event is fired, the items object or array is read in. Then I change the this.state.brands object with the data from the backend. But then no update occurs and the items object is not updated. Therefor the old items object is shown.

How can I solve this problem in a class based component?

Thanks!

PS: This is my ComponendDidMount :

 async componentDidMount () { const brands = await SearchForBrands(params); this.setState((state) => { return state.showBrandSuggestions = brands }) }

Answer 1

Try this way

Your componentDidMount method should be like

async componentDidMount () {
  const brands = await SearchForBrands(params);
  this.setState({ showBrandSuggestions: brands });
}

Your inputBrandText method should be like

async inputBrandText (text) {
  const brands = await SearchForBrands(params);
  this.setState({ brands: brands });
};