我有一个项目列表,我希望在任何给定时间只突出其中一个。我写了以下代码:
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
吗?
如果是,那么如何在适当的时候初始化它以便不出现错误?
答案 0 :(得分:2)
你有2个语法错误。
一个是您没有正确设置状态。其次,您正在执行该功能,而不是将其作为属性传递。
constructor(props) {
super(props);
this.state = {indexHighlighted: 0};
}
<TouchableHighlight onPress={() => this.selectItem(item["indexNr"])}>
// ...
<TouchableHighlight />
答案 1 :(得分:0)
你必须在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>
答案 2 :(得分:-2)
在构造函数中,您应该使用以下语法:
constructor(props) {
super(props);
this.state = {
indexHighlighted: 0
};
}