Question

在React Native中，我有一个列表，其中只突出显示了一个元素。单击某个元素时，该元素将突出显示，其他所有元素都不会突出显示。

在selectItem方法中，我设置了this.state.highlighted。然后，在checkIfHighlighted中，基于this.state.highlighted我将布尔参数传递给列表项，这意味着它们是否突出显示。

   export default class MyList extends React.Component {


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

    selectItem = (i) => {
        console.log("Selected different list item: " + i);
        this.setState({indexHighlighted: i});
        console.log("this.state.indexHighlighted: " + this.state.indexHighlighted);
    }

    checkIfHighlighted(i) {
        console.log("Is " + i + "hignlighted? " + (i == this.state.indexHighlighted));
        return i == this.state.indexHighlighted;
    }

    render() {
        console.log("In render, this.state.indexHighlighted: " + this.state.indexHighlighted);
        return ( 
            <FlatList
                renderItem={ ({item}) =>
                    <TouchableHighlight onPress={() => this.selectItem(item["indexNr"])}>
                        <View>
                            <MyListItem
                                key={item["indexNr"]}
                                highlighted = {this.checkIfHighlighted(item["indexNr"])}
                                orderInList={item["indexNr"]} />
                        </View>
                    </TouchableHighlight>
                }
                keyExtractor = {(item, index) => index}
            /> 
        );
    }
}

当我按下某个项目并检查日志时，此行将在selectItem：

中执行

console.log("Selected different list item: " + i);

之后，应该设置状态：

this.setState({indexHighlighted: i});

但是，selectItem中的下一行未执行：

console.log("this.state.indexHighlighted: " + this.state.indexHighlighted);

此外，render()中的这一行未执行：

console.log("In render, this.state.indexHighlighted: " + this.state.indexHighlighted);

那发生了什么？为什么render()没有被调用？

由于我使用setState()更新状态，因此应重新呈现整个组件，对吧？

当我调用setState（）

0 个答案: