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

时间:2017-10-05 17:20:31

标签: javascript reactjs react-native

我有一个项目列表,我希望在任何给定时间只突出其中一个。我写了以下代码:

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.statenull?如果我从构造函数中设置它,它可以是null吗?

如果是,那么如何在适当的时候初始化它以便不出现错误?

3 个答案:

答案 0 :(得分:2)

你有2个语法错误。

一个是您没有正确设置状态。其次,您正在执行该功能,而不是将其作为属性传递。

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

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

答案 1 :(得分:0)

你必须在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>

答案 2 :(得分:-2)

在构造函数中,您应该使用以下语法:

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