在評估this.state時，null不是對象。

Question

我有一個項目清單，我希望在任何給定時間僅突出其中的一個。 我寫了以下代碼：

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}
        /> 
    );
}

當我運行此代碼時，我得到的null is not an object (evaluating '_this.state.indexHighlighted') 。

為什么this.state為null ？ 如果我通過構造函數設置它，可以為null嗎？

如果是，那么如何在適當的時候初始化它，從而不會出現錯誤？

Answer 1

您有2個語法錯誤。

一是您沒有正確設置狀態。 其次，您正在執行函數，而不是將其作為屬性傳遞。

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

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

Answer 2

您必須將函數綁定到constructor函數中，如果要向函數發送參數，則應在jsx中定義一個外部函數。 您還應該在checkIfHighlighted fucn中使用return。

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

在構造函數中，應使用以下語法：

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