How can I fix the React Native setState error?

Question

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>

Not sure if it's related but you should bind methods to your class in the constructor and not in componentDidMount — Siddharth
– Siddharth, Commented Jun 28, 2020 at 15:16

Mariam Amr · Accepted Answer · 2020-06-28 15:19:40Z

1

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.

answered Jun 28, 2020 at 15:19

Mariam Amr

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

windmaomao · Accepted Answer · 2020-06-28 15:10:53Z

0

  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>

answered Jun 28, 2020 at 15:10

windmaomao

7,7322 gold badges37 silver badges38 bronze badges

Comments

Denis Stukalov · Accepted Answer · 2020-06-28 15:34:33Z

0

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

answered Jun 28, 2020 at 15:34

Denis Stukalov

1,2521 gold badge9 silver badges11 bronze badges

Collectives™ on Stack Overflow

How can I fix the React Native setState error?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related