空值不是一個對象，當評估this.state

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

在構造函數中，你應該使用這個語法：

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

Answer 2

你有2個語法錯誤。

一個是你沒有正確的設置狀態。其次，您正在執行該功能，而不是將其作爲屬性傳遞。

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

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

Answer 3

必須綁定你的函數在constructor，如果你想發送的參數給你的函數，你應該定義在JSX外部功能。你也可以使用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>