在评估this.state时，null不是对象。

Question

I have a list of items and I would like only one of them to be highlighted at any given time. I wrote the following code:

constructor(props) {
    super(props);
    this.setState({indexHighlighted: 0});
}

selectItem = (i) => {
    this.setState({indexHighlighted: i});
}

checkIfHighlighted = (i) => {
    i == this.state.indexHighlighted;
}

render() {
    return ( 
        <FlatList
            data={myData} 
            renderItem={ ({item}) =>
                <TouchableHighlight onPress={this.selectItem(item["indexNr"])}>
                    <ShoppingListItem
                        key={item["indexNr"]} 
                        highlighted = {this.checkIfHighlighted(item["indexNr"])}
                        orderInList={item["indexNr"]} />
                </TouchableHighlight>
            }
            keyExtractor = {(item, index) => index}
        /> 
    );
}

When I run this code, I get null is not an object (evaluating '_this.state.indexHighlighted') .

Why would this.state be null ? Can it be null if I set it from the constructor?

If yes, then how can I initialise it in due time such that error doesn't appear?

Answer 1

You have 2 syntax mistake.

One is that you are not settings state correctly. Second you are executing the function rather than passing it as a property.

constructor(props) {
    super(props);
    this.state = {indexHighlighted: 0};
}

 <TouchableHighlight onPress={() => this.selectItem(item["indexNr"])}>
   // ...
 <TouchableHighlight />

Answer 2

you must bind your function in the constructor and if you want send an argument to your function you should define an outer function in jsx. Also you shoul use return in checkIfHighlighted fucn.

constructor(props) {
    super(props);
     this.state = {
       indexHighlighted: 0
     };
     this.checkIfHighlighted = this.checkIfHighlighted.bind(this);
     this.selectItem = this.selectItem.bind(this);
        }

...
checkIfHighlighted (){
  return i == this.state.indexHighlighted;

}
...

jsx :

<TouchableHighlight onPress={()=>{this.selectItem(item["indexNr"])}}>
                    <ShoppingListItem
                        key={item["indexNr"]} 
                        highlighted = {this.checkIfHighlighted(item["indexNr"])}
                        orderInList={item["indexNr"]} />
                </TouchableHighlight>

Answer 3

In constructor you should use this syntax:

    constructor(props) {
    super(props);
     this.state = {
       indexHighlighted: 0
     };
    }