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

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

3 个答案: