CODEWITHSUNDEEP
javascripttypescriptreact-native
Gündoğdu Yakıcı
Gündoğdu Yakıcı

Reputation: 677

How can I fix the React Native setState error?

First of all, I apologize for my bad English.I am using the select component of the UI Kitten. Every item fails when I change it.

This is the mistake;

"Warning cannot update during an existing state react native"

I am sharing sample codes with you.

const data = [
  "test 1",
  "test 2"
];

constructor(props) {
  super(props);    

  this.state = {      
    selectedIndex: new IndexPath(0), 
    displayValue: null
  };    
}

componentDidMount() {
  this._handleSetSelectedIndex = this._handleSetSelectedIndex.bind(this);
}

_handleSetSelectedIndex(value) {
  this.setState({selectedIndex: value});
}

in Render function;

<Select
  style={{ width: 300 }}
  placeholder='Default'
  value={data[this.state.selectedIndex.row]}
  selectedIndex={this.state.selectedIndex}
  onSelect={index => this._handleSetSelectedIndex(index)}>
  {data.map((key, value) => {
      return (
        <SelectItem key={value} title={key}/>
    );
  })}
</Select>

Upvotes: 0

Views: 248

Answers (3)

Denis Stukalov
Denis Stukalov

Reputation: 1242

When you call setSelectedIndex, you pass the index, but it is the event object. Use this syntaxis:

onChange={(event) => this._handleSetSelectedIndex(event)}>

See full example in the playground: https://jscomplete.com/playground/s524798

Upvotes: 0

Mariam Amr
Mariam Amr

Reputation: 11

The problem is that the program can't update state inside rendering..it goes through infinite loop so "selectedIndex" must have an event handler function to handle when to setState it.

Upvotes: 1

windmaomao
windmaomao

Reputation: 7671

  onSelect={index => this._handleSetSelectedIndex(index)}>

this line seems problematic to me.

try onSelect={this._handleSetSelectedIndex}

also add a console.log inside this function and see if it ever fires when you select a new item.

Also worth to try to reproduce the basic onSelect first following their tutorial,

     <Select
        selectedIndex={selectedIndex}
        onSelect={index => setSelectedIndex(index)}>
        <SelectItem title='Option 1'/>
        <SelectItem title='Option 2'/>
        <SelectItem title='Option 3'/>
      </Select>

Upvotes: 0

Related Questions