为什么 FlatList 中的条件渲染显示无序结果

Question

我想在FlatList中实现条件渲染，所以我使用了下面的逻辑。这是 FlatList 的代码。

<View style={styles.container}>
            <FlatList
                data={Object.keys(props.results)}
                numColumns={3}
                extraData={Object.keys(props.results)}
                keyExtractor={(item, index) => 'key' + index}
                renderItem={({item}) => {
                   **return renderMessage(item, props)**
                }}/>
        </View>

这是条件代码：

 const renderMessage = (item, props) => {
        if (props.results[item].opted) {
            console.log("inside if")
            return (
                <TouchableOpacity>
                    <ResultsDetail results={props.results[item]}
                                   setResults={props.setResults}
                                   setUserInterestResults={props.setUserInterestResults}> </ResultsDetail>
                </TouchableOpacity>
            );
        }
    }

我正在 gridview 中获取结果，但未按顺序排列。我认为它会根据索引进行排序或显示。请查出如下。

如何排列顺序？你们能帮我解决这个问题吗？

Answer 1

试试这个

<View style={styles.container}>
    <FlatList
        data={Object.keys(props.results).filter((item => item.opted === true ? return item))}
        numColumns={3}
        extraData={Object.keys(props.results).filter((item => item.opted === true ? return item))}
        keyExtractor={(item, index) => 'key' + index}
        renderItem={({ item }) => renderMessage(item, props)} />
</View>


const renderMessage = (item, props) => {
    return (
        <TouchableOpacity>
            <ResultsDetail results={props.results[item]}
                setResults={props.setResults}
                setUserInterestResults={props.setUserInterestResults}> </ResultsDetail>
        </TouchableOpacity>
    );
}

Answer 2

我可以使用过滤器按顺序排列它。我在下面发布了更新的答案。

<View style={styles.container}>
                <FlatList
                    **data={Object.keys(props.results).filter((value) =>{
                        return props.results[value].opted === true;
                    })}**
                    numColumns={3}
                    keyExtractor={(item, index) => 'key' + index}
                    renderItem={({item}) => {
                        return renderMessage(item, props)
                    }}/>
            </View>


const renderMessage = (item, props) => {

    return (
        <TouchableOpacity>
            <ResultsDetail results={props.results[item]}
                           setResults={props.setResults}
                           setUserInterestResults={props.setUserInterestResults}> </ResultsDetail>
        </TouchableOpacity>
    );

}

为什么 FlatList 中的条件渲染显示无序结果

Why does conditional rendering in FlatList showing unordered result

reactjs

react-native

react-native-flatlist